父元素的兄弟元素（单击元素除外）在jQuery中消失

Question

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.

Answer 1

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();
 });

Answer 2

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> 

Answer 3

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

Answer 4

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();
});