I have used have to change the wording of this CV whenever you click on a button.
function myFunction(){
document.getElementById("demo").innerHTML= " ACERCA DE MI Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id pellentesque orci. Duis vulputate est a nulla consectetur, vitae hendrerit purus malesuada. r";
}
function myFunction2(){
document.getElementById("demo").innerHTML = " EXPERIENCIA Proin et tortor ut lorem finibus enter image description hereblandit. Etiam convallis, libero eu pellentesque semper, nibh mauris suscipit magna, vehicula vulputate nibh urna at urnas.";
}
function myFunction3(){
document.getElementById("demo").innerHTML = " ESTUDIOS Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id pellentesque orci. Duis vulputate est a nulla consectetur, vitae hendrerit purus malesuada. Vestibulum am.";
}
function myFunction4(){
document.getElementById("demo").innerHTML = " HABILIDADES Proin et tortor ut lorem finibus blandit. Etiam convallis, libero eu pellentesque semper, nibh mauris suscipit magna, vehicula vulputate nibh urna at urna. Duis eget dolor eros.";
}
<div class="text-center">
<button class="button button1" type="button" onclick="myFunction()">ACERCA DE MI</button>
<button class="button button2" type="button" onclick="myFunction2()">EXPERIENCIA </button>
<button class="button button3" type="button" onclick="myFunction3()">ESTUDIOS </button>
<button class="button button4" type="button" onclick="myFunction4()">HABILIDADES </button>
</div>
<p id="demo"><img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">
ACERCA DE MI Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id pellentesque orci. Duis vulputate est a nulla consectetur, vitae hendrerit purus malesuada. Vestibulum euismod orci volutpat fringilla egestas. Etiam pellentesque orci sed risus rhoncus tempor. Cras molestie id turpis ac laoreet. Curabitur vel justo nunc. Maecenas eget ante tincidunt lorem fermentum dapibus non in quam. orem ipsum dolor
</p>
How can I style the new text that appears with the click of the button? I have no idea how to link the inneHTML to CSS and be able to change the font, size and add space between sentences. Thank you!
how it looks so far. I want to create paragraphs with the text
I tried adding tags to the inner.html but that just breaks the link
so far I just styled de tag in css to forcefully make it as it looks now but it is not enough to change it into paragraphs
Be aware, that your code removed the image within <p> element too.
What you can do, is according to which button was clicked, add a different css class and define a style for it.
Simplified, it would look something like this:
<script>
function myFunction() {
let element = document.getElementById('demo');
element.classList = ['style1'];
element.innerHTML = 'new red inner text';
}
function myFunction2() {
let element = document.getElementById('demo');
element.classList = ['style2'];
element.innerHTML = 'new green inner text';
}
</script>
<style>
.style1 {
color: #FF0000;
font-weight: bold;
}
.style2 {
color: #00FF00;
font-weight: bold;
}
</style>
<div class="text-center">
<button class="button button1" type="button" onclick="myFunction()">Button 1</button>
<button class="button button2" type="button" onclick="myFunction2()">Button 2</button>
</div>
<p><img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow"> <span id="demo">Inner Text </span>
</p>
Related
I learn on how to alert all html code from webpage using this code:
var markup = document.document.innerHTML;
alert(markup);
I want to alert only all <p>
I tried this code
var markup = document.getElementsByTag('p').innerHTML;
alert(markup);`
But it's not working
document.getElementsByTagName("p") returns a HTMLCollection which you can convert to an array using the spread operator. Then you need to get the innerHTML for each element of the array. Finally you can join those innerHTML together to output them:
var pElements = [ ... document.getElementsByTagName("p") ];
var pMarkup = pElements.map( element => element.innerHTML );
alert( pMarkup.join( "\n" ) );
<p>abc<strong>def</strong></p>
<table><tr><td>Don't show this</td></tr></table>
<p>ghi<em>jkl</em></p>
I think you are after HTMLElement.outerHTML
// All p's
const pTags = document.querySelectorAll('p');
const output = [...pTags].map(p => p.outerHTML).join("");
console.log(output);
.red {
color: red;
}
<p class="red">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at fermentum turpis. Maecenas congue accumsan enim, et dictum turpis malesuada et.
</p>
<p>
Mauris vitae pretium tortor. Aenean nulla ante, scelerisque in erat ac, tincidunt porttitor dolor. Sed blandit sed mi at vulputate.
</p>
<p id="three">
Curabitur lobortis at augue at hendrerit. Mauris id ligula cursus ligula dictum viverra.
</p>
<p>
Sed suscipit varius orci. Duis sit amet fermentum eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin commodo turpis in neque aliquam, et laoreet odio consequat.
</p>
<p data-number="5">
Nam dolor neque, lacinia sed viverra et, cursus ac ipsum. Cras gravida quam enim, sit amet tristique urna faucibus non.
</p>
<p>
Phasellus cursus, justo a volutpat pulvinar, ligula metus mollis turpis, in tincidunt ante nisl non nunc.
</p>
I am rather new to javascript and am attempting to code a series of buttons on my webpage that function to change the overall brightness of the page. I've coded 3 buttons in my page responsible for increasing, decreasing and resetting the brightness of the body. Then I've coded some javascript which is supposed to increase/decrease the brightness by 10% with each button click. I've done the following:
var $ = function (id) {
return document.getElementById(id);
};
function modifyBrightness(val) {
var brightness = 1.0;
brightness = brightness + val;
brightness = parseInt(brightness, 10);
$("body_id").style.filter = "brightness(brightness)";
return brightness;
}
function resetBrightness() {
$("body_id").style.filter = "brightness(1.00)";
}
$("decrease_brightness").onclick = modifyBrightness(-0.1);
$("increase_brightness").onclick = modifyBrightness(0.1);
$("reset_brightness").onclick = resetBrightness();
#body_id{
height: 100px;
background-color: blue;
}
<body id="body_id>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt pharetra dui, non efficitur mauris scelerisque sed. Donec auctor ut sem vitae bibendum. Aliquam dignissim aliquet augue et condimentum. Aliquam non dui velit. Aenean egestas ligula eget urna malesuada imperdiet. Vivamus vel velit dapibus, sollicitudin dolor at, elementum quam. Aenean eu libero vel velit faucibus convallis. Nullam et velit a ipsum sagittis malesuada. <p>
<body>
<form id="brightness_change_form">
<label for="decrease_brightness" id="change_brightness_label">Change Brightness:</label>
<input type="button" id="decrease_brightness" value="Decrease Page Brightness">
<input type="button" id="increase_brightness" value="Increase Page Brightness">
<input type="button" id="reset_brightness" value="Reset Page Brightness">
</form>
However, I simply am not knowledgeable enough to figure out what I've got wrong in my javascript. I would greatly appreciate any advice.
As Nicholas pointed out, you're missing the closing quote on the body id which is why you're getting a syntax error.
Change <body id="body_id> to <body id="body_id">.
var current = 50;
const $ = (id) => document.getElementById(id);
function modifyBrightness(val) {
current += val;
//$("body_id").style.backgroundColor = `hsl(240, 100%, ${current}%)`;
$("body_id").style.filter = `brightness(${current}%)`;
}
$("decrease_brightness").addEventListener('click', () => {
modifyBrightness(-10);
});
$("increase_brightness").addEventListener('click', () => {
modifyBrightness(10);
});
$("reset_brightness").addEventListener('click', () => {
modifyBrightness(50);
});
#body_id{
height: 100px;
background-color: blue;
}
<body id="body_id">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt pharetra dui, non efficitur mauris scelerisque sed. Donec auctor ut sem vitae bibendum. Aliquam dignissim aliquet augue et condimentum. Aliquam non dui velit. Aenean egestas ligula eget urna malesuada imperdiet. Vivamus vel velit dapibus, sollicitudin dolor at, elementum quam. Aenean eu libero vel velit faucibus convallis. Nullam et velit a ipsum sagittis malesuada. <p>
<body>
<form id="brightness_change_form">
<label for="decrease_brightness" id="change_brightness_label">Change Brightness:</label>
<input type="button" id="decrease_brightness" value="Decrease Page Brightness">
<input type="button" id="increase_brightness" value="Increase Page Brightness">
<input type="button" id="reset_brightness" value="Reset Page Brightness">
</form>
You can also try using HSL (Hue, Saturation, Lightness) to change only the background color lightness which won't affect the buttons. I left a comment in the above code for you to try yourself.
I've stocked in a var, the text of my tag when i mouseenter, and now i would put the same word if it's in a paragraph document, in highlights like a color or in bold .css()
here is my code, the alert allows me to know which text i put in my var 'leContenu' :
var leContenu;
$('.chip').on('mouseenter mouseleave', function(e) {
if (e.type === 'mouseenter'){
$(this).siblings(".chip").not(".noselect").stop(true, true).animate({'opacity': '0.7'}, 'fast');
//alert ($(this).text());
leContenu = $(this).text();
$('p').find(leContenu).css('color', 'red');
//another try
/*
return this.html(function() {
alert ($(this).text());
$('p').wrapInner(leContenu).css('color', 'red');
});
*/
//end another try
}
else{
$(this).siblings(".chip").stop(true, true).animate({'opacity': '1'}, 'fast');
}
});
And the Html is here:
<div class="var-category">
<p class="title-category">Zone de communication</p>
<div class="chips">
<p class="chip">#ville</p>
<p class="chip">#cp</p>
<p class="chip">#ville1</p>
<p class="chip">#ville2</p>
<p class="chip">#ville3</p>
<p class="chip noselect">#ville4</p>
<p class="chip">#loc</p>
<p class="chip">#dpt</p>
</div>
</div>
<div class="container">
<div class="Tcard">
<div class="title-page">
<h2 class="h2popout">Edition de contenu n°1</h2>
</div>
<ul class="collapsible popout collapsible-accordion" data-collapsible="accordion">
<li>
<div class="collapsible-header"><i class="material-icons">subtitles</i>First</div>
<div class="collapsible-body">
<p>Ce paragraphe présente les prestations client sous forme de liste à puce</p>
<strong>Contribution</strong> H2
<p>Phrases</p>
<p>Liste à puce + liens internes</p>
<p>CTA</p>
</div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">place</i>Second</div>
<div class="collapsible-body">
<p><strong class="tagVar">BML</strong> est une <span class="tagVar">#ville</span> spécialisée dans la fission nucléaire, dans le Rhône : à <span class="tagVar">Lyon</span>.</p>
<p>Nous proposons tout plein de jolis champignons à nos clients afin de développer une synergie
dans la confection de réseaux créatif. Il est important de noter l'impact écologique de nos centrales
en <span class="tagVar">carton</span>. <span class="tagVar">Contactez-nous</span> pour plus d'informations sur le sujet.
</p>
</div>
</li>
</ul>
</div>
I don't understand which function will allow me to search and modify in Anyone knows?
I finally got a code working for this
var leContenu;
var repl;
$(document).on("mouseenter mouseleave", "#chip", function(e) {
if(e.type == 'mouseenter'){
if($('#body').find('.myClass').length > 0){
$('#body').find('.myClass').css("color", "red");
}else{
leContenu = $(this).text().trim();
var rgxp = new RegExp("\\b" + leContenu + "\\b" , 'gi');
repl = '<span class="myClass">' + leContenu + '</span>';
$('#body').html($('#body').html().replace(rgxp, repl));
}
}else{
$('#body').find('.myClass').css('color', "black");
}
});
.myClass{
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body id="body">
<div>
<div id='chip' class=".chip">
Test
</div>
</div>a
<h1>HTML Test Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean test, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem test dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
</body>
Looks like I'm late to the party. My solution is similar to #BrentBoden.
HTML
<div class="chips">
<p class="chip">#ville</p>
<p class="chip">#cp</p>
<p class="chip">#ville1</p>
<p class="chip">#ville2</p>
<p class="chip">#ville3</p>
<p class="chip noselect">#ville4</p>
<p class="chip">#loc</p>
<p class="chip">#dpt</p>
</div>
<div class="search">
<p>Lorem ipsum dolor sit amet, consectetur #ville adipiscing elit. #ville2 Mauris non justo laoreet, tristique ex non, sodales odio. Sed ac nunc nisl. Mauris eu laoreet ligula, ac condimentum eros. Vivamus risus neque, mattis ac laoreet #cp non, imperdiet eget nunc. Cras porttitor volutpat leo, quis rhoncus nulla. Sed hendrerit sagittis neque, quis iaculis felis elementum eu. Donec et tristique sapien, sed scelerisque est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas at fringilla #ville1 purus. Curabitur sit amet est id sem auctor dignissim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum quam orci, #loc aliquet #dpt vel faucibus eget, aliquam quis orci.</p>
<p>Nullam diam magna, egestas ac metus non, dignissim lobortis purus. Aliquam erat volutpat. In nec massa eget mi vestibulum #ville3 varius volutpat a nisl. Nulla enim magna, fringilla eu erat nec, ullamcorper pellentesque dui. Etiam consectetur diam lectus, et finibus tellus feugiat quis. Pellentesque eu hendrerit dui. Nunc ut maximus mi, nec facilisis nisi. Etiam porta condimentum velit id #ville4 finibus. Aenean pretium condimentum orci vel tempor.</p>
</div>
CSS
.chip {
display: inline-block;
margin: 0 10px;
background-color: #dadada;
}
.highlight {
background-color: yellow;
}
jQuery
$(document).ready(function() {
$(".chip").hover(function(e) {
// Mouse In
var text = $(this).text().trim();
$(".search").html($(".search").html().replace(text, "<span class='highlight'>"+text+"</span>"));
}, function(e) {
// Mouse Out
$.each($(".search p"), function(index, element) {
$(element).html($(element).text());
});
});
});
Here's a Fiddle to play around with.
NOTE:
My solution only highlights the first instance of the tag. If you need to highlight multiple tags at once you'll need to use RegEx - something similar to #BrentBoden's solution.
More info on that here: jQuery - replace all instances of a character in a string
I am using bootstrap jumptron and a background image. As I scroll down the background image disappears leaving the jumptron div class only showing the heading. How can it be fix so when I scroll down the image doesn't desappear. The other content works proper, The following files provide more detail. The following files are in a Rails 5 app.
index.html.erb
<div class="bg"></div>
<div class="jumbotron">
<h1>Organize and Mobilize</h1>
</div>
<div class="container">
<div class="row">
<h2>We need you to take action</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.
</div>
<hr>
<div class="row">
<h2>Page Content</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.
<h2>Page Content</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.
<h2>Page Content</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.
</div>
<hr>
<div class="row">
<h2>Page Content</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-md-12 text-center"><p>The End.</p></div>
</div>
</div>
bootstrap_and_overrides.css
/*
=require twitter-bootstrap-static/bootstrap
Static version of css will use Glyphicons sprites by default
=require twitter-bootstrap-static/sprites
*/
body { padding-top: 50px; }
.bg {
background: url('protest.jpg') no-repeat center center;
position: fixed;
width: 100%;
height: 450px; /*same height as jumbotron */
top:0;
left:0;
z-index: -1;
}
.jumbotron {
margin-bottom: 50px;
height: 350px;
color: white;
text-shadow: black 0.3em 0.3em 0.3em;
background:transparent;
}
and cable.js
// Action Cable provides the framework to deal with WebSockets in Rails.
// You can generate new channels where WebSocket features live using the rails generate channel command.
//
//= require action_cable
//= require_self
//= require_tree ./channels
(function() {
this.App || (this.App = {});
App.cable = ActionCable.createConsumer();
}).call(this);
var jumboHeight = $('.jumbotron').outerHeight();
function parallax(){
var scrolled = $(window).scrollTop();
$('.bg').css('height', (jumboHeight-scrolled) + 'px');
}
$(window).scroll(function(e){
parallax();
});
This is the image before I scroll the page:
You shouldn't put an image as the background of the jumbotron, that's not what it's for.
Instead, make the jumbotron background color transparent, then add the background image to the div outside of the container.
ie. in HAML
#YourDivToApplyBackground
.container
.row
.col-md-12
.jumbotron
%h1 Your Page Title
This is how your code should look for bootstrap.
I am trying to fullscreen a div#controls when a button inside it is clicked and make all other div#controls with same parent, div#buttons, disappear.
My HTML:
<div id="testpile" class="inner cover">
<div id="buttons" class="buttons">
<div id="controls" class="col-md-4 rat">
<h1>Rationelt</h1>
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam laoreet, risus vel tincidunt sagittis, lorem risus faucibus mi, eget tincidunt ipsum sapien vel dolor. Mauris pulvinar leo feugiat, ultricies est ut, porta arcu.</p>
<a id="1" class="btn btn-group btn-default" role="button">Rationelt</a>
</div>
<div id="controls" class="col-md-4 emo">
<h1>Emotionelt</h1>
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam laoreet, risus vel tincidunt sagittis, lorem risus faucibus mi, eget tincidunt ipsum sapien vel dolor. Mauris pulvinar leo feugiat, ultricies est ut, porta arcu.</p>
<a id="2" class="btn btn-group btn-default" role="button">Emotionelt</a>
</div>
<div id="controls" class="col-md-4 per">
<h1>Personligt</h1>
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam laoreet, risus vel tincidunt sagittis, lorem risus faucibus mi, eget tincidunt ipsum sapien vel dolor. Mauris pulvinar leo feugiat, ultricies est ut, porta arcu.</p>
<a id="3" class="btn btn-group btn-default" role="button">Personligt</a>
</div>
</div>
</div>
My jQuery:
<script type="text/javascript">
$('.btn-group').on('click', function() {
$(this).parent().toggleClass('col-md-4 col-md-12');
$(this).parent().siblings().toggleClass('col-md-4 col-md-0');
});
</script>
I am quite sure that the problem I am having is that I have not succeeded in targeting the right div, but I have tried everything to solve it myself and sadly, haven't been able to.
As an aside of the control id being duplicated, simply toggle the display of the parents siblings to show/hide them on each button click:
$('.btn-group').on('click', function() {
$(this).parent().siblings().toggle();
});
You are targeting the right div, despite the invalid duplicate IDs.
The use of toggleClass is the problem, especially after the first click, since it will toggle each class from its current state, which will give inconsistent results depending on which order the user clicks on each item -- you also appear to be toggling grid column declarations, which I'm not sure is what you intend?
Below I've changed your code to use addClass and removeClass explicitly (and have made 'hidden' still slightly visible so you can see the effect of subsequent clicks)
$('.btn-group').on('click', function() {
$(this).parent().removeClass('hidden');
$(this).parent().siblings().addClass('hidden');
});
.hidden {opacity:0.1}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="testpile" class="inner cover">
<div id="buttons" class="buttons">
<div id="controls" class="col-md-4 rat">
<h1>Rationelt</h1>
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam laoreet, risus vel tincidunt sagittis, lorem risus faucibus mi, eget tincidunt ipsum sapien vel dolor. Mauris pulvinar leo feugiat, ultricies est ut, porta arcu.</p>
<a id="1" class="btn btn-group btn-default" role="button">Rationelt</a>
</div>
<div id="controls" class="col-md-4 emo">
<h1>Emotionelt</h1>
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam laoreet, risus vel tincidunt sagittis, lorem risus faucibus mi, eget tincidunt ipsum sapien vel dolor. Mauris pulvinar leo feugiat, ultricies est ut, porta arcu.</p>
<a id="2" class="btn btn-group btn-default" role="button">Emotionelt</a>
</div>
<div id="controls" class="col-md-4 per">
<h1>Personligt</h1>
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam laoreet, risus vel tincidunt sagittis, lorem risus faucibus mi, eget tincidunt ipsum sapien vel dolor. Mauris pulvinar leo feugiat, ultricies est ut, porta arcu.</p>
<a id="3" class="btn btn-group btn-default" role="button">Personligt</a>
</div>
</div>
</div>
I don't think you are doing anything to the siblings of the parent except just giving them a column class. From what I understand what you need to add is .hide() method.
This will hide the divs that you want hidden.
Here is a link from the jquery api that will help you and give examples link
remove that id controls. IDs should not repeat, use class there like;
<div class="controls col-md-4 rat">
and use JS like;
$('.btn-group').on('click', function() {
$(".controls").hide();
$(this).parents(".controls").show();
});