当使用JS或JQuery甚至引导程序单击另一个div时，如何隐藏一个div？

Question

I have one main container div with a bunch of columns. Each of these columns have a data-toggle="collapse" attribute, and one special id data target attribute.

Next, I have 6 separated div containers with columns and content inside.

I want one div to be shown at time. When one div is clicked the previous one is hidden.

This is what I did, only thing I am not sure of, is how to hide the content divs that are below the comment in:

 <div class="container-fluid"> <div class="row"> <div class="col-sm-12 col-md-4" data-toggle="collapse" data- target="#one"> <h1>Content 1</h1> </div> <div class="col-sm-12 col-md-4" data-toggle="collapse" data-target="#two"> <h1>Content 2</h1> </div> <div class="col-sm-12 col-md-4" data-toggle="collapse" data-target="#three"> <h1>Content 3</h1> </div> <div class="col-sm-12 col-md-4" data-toggle="collapse" data-target="#four"> <h1>Content 4</h1> </div> <div class="col-sm-12 col-md-4" data-toggle="collapse" data-target="#five"> <h1>Content 5</h1> </div> <div class="col-sm-12 col-md-4" data-toggle="collapse" data-target="#six"> <h1>Content 6</h1> </div> </div> </div> <!--Content divs below--> <div class="container-fluid"> <div class="row"> <div class="col-sm-12 col-md-4" data-toggle="collapse" data- target="#one"> <h1>Content 1</h1> </div> <div class="col-sm-12 col-md-4" data-toggle="collapse" data- target="#two"> <h1>Content 2</h1> </div> <div class="col-sm-12 col-md-4" data-toggle="collapse" data- target="#three"> <h1>Content 3</h1> </div> <div class="col-sm-12 col-md-4" data-toggle="collapse" data- target="#four"> <h1>Content 4</h1> </div> <div class="col-sm-12 col-md-4" data-toggle="collapse" data- target="#five"> <h1>Content 5</h1> </div> <div class="col-sm-12 col-md-4" data-toggle="collapse" data- target="#six"> <h1>Content 6</h1> </div> </div> </div> <!--Content divs below--> <div class="container collapse" id="one"> <div class="row"> <div class="col-md-4"> <h1>Content from div 1</h1> </div> </div> </div> <div class="container collapse" id="two"> <div class="row"> <div class="col-md-4"> <h1>Content from div 2</h1> </div> </div> </div> <div class="container collapse" id="three"> <div class="row"> <div class="col-md-4"> <h1>Content from div 3</h1> </div> </div> </div> <div class="container collapse" id="four"> <div class="row"> <div class="col-md-4"> <h1>Content from div 4</h1> </div> </div> </div> <div class="container collapse" id="five"> <div class="row"> <div class="col-md-4"> <h1>Content from div 5</h1> </div> </div> </div> <div class="container collapse" id="six"> <div class="row"> <div class="col-md-4"> <h1>Content from div 6</h1> </div> </div> </div> 

Answer 1

Below Example help you to solve your question.

 $('.top').on('click', function() { $parent_box = $(this).closest('.box'); $parent_box.siblings().find('.bottom').hide(); $parent_box.find('.bottom').toggle(); }); 

 .container .box { float: left; width: 150px; margin: 20px; } .container .box .top { padding: 12px; background-color: blue; color: white; cursor: pointer; } .container .box .bottom { padding: 12px; background-color: red; color: white; display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="box"> <div class="top"> click me </div> <div class="bottom"> door #1 </div> </div> <div class="box"> <div class="top"> click me </div> <div class="bottom"> door #2 </div> </div> <div class="box"> <div class="top"> click me </div> <div class="bottom"> door #3 </div> </div> </div> 

Answer 2

You should use bootsrap accordian for this otherwise you have to handle it yourself using manually hiding all content div first and then show the currently targeted div using jQuery.

Also you have duplicate for the accordian links in your code.

Here is what boostrap accordian code will look like :

<!--Content divs below-->
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12 col-md-4" data-toggle="collapse"  data-
             target="#one">
            <h1>Content 1</h1>
        </div>
        <div class="col-sm-12 col-md-4" data-toggle="collapse"  data-
             target="#two">
            <h1>Content 2</h1>
        </div>
        <div class="col-sm-12 col-md-4" data-toggle="collapse"  data-
             target="#three">
            <h1>Content 3</h1>
        </div>
        <div class="col-sm-12 col-md-4" data-toggle="collapse"  data-
             target="#four">
            <h1>Content 4</h1>
        </div>
        <div class="col-sm-12 col-md-4" data-toggle="collapse"  data-
             target="#five">
            <h1>Content 5</h1>
        </div>

        <div class="col-sm-12 col-md-4" data-toggle="collapse"  data-                        
             target="#six">
            <h1>Content 6</h1>
        </div>
    </div>
</div>


<div class="accordion-group">

    <div class="container collapse" id="one">

        <div class="row">
            <div class="col-md-4">
                <h1>Content from div 1</h1>
            </div>

        </div>

    </div>

    <div class="container collapse" id="two">

        <div class="row">
            <div class="col-md-4">
                <h1>Content from div 2</h1>
            </div>

        </div>

    </div>


    <div class="container collapse" id="three">

        <div class="row">
            <div class="col-md-4">
                <h1>Content from div 3</h1>
            </div>

        </div>


    </div>


    <div class="container collapse" id="four">

        <div class="row">
            <div class="col-md-4">
                <h1>Content from div 4</h1>
            </div>

        </div>


    </div>


    <div class="container collapse" id="five">

        <div class="row">
            <div class="col-md-4">
                <h1>Content from div 5</h1>
            </div>

        </div>


    </div>



    <div class="container collapse" id="six">


        <div class="row">
            <div class="col-md-4">
                <h1>Content from div 6</h1>
            </div>

        </div>


    </div>
</div>