Expand collapse all divs at one time

Question

I am using twitter bootstrap css and js frameworks. In this example I have four collapsible divs.

when i opened one div then I am clicking expand all button then automatically the opened div is closing.

The way I would like to show all the divs can be expanded at a time.

E.g. if #about is opened and the user clicks expand all button then it has to show all including with #about.

Is there an easy way to do this?

Here is the code:-

<section id="accordion">
  <a href="#_" class="expandcollapse btn btn-mini btn-primary pull-right" state="0"><i class='icon-white icon-plus-sign'></i> Expand All</a>
    <ul class="nav nav-tabs" id="tabFAQ">
       <li class="active"><a href="#GQ" data-toggle="tab" state="0">Subscriptions</a></li>
    </ul>
    <div class="tab-content" id="faqContent">
      <div class="tab-pane active" id="GQ">
        <div class="accordion" id="generalQuestions">
          <div class="accordion-group">
            <div class="accordion-heading clearfix">
                <label class="checkbox pull-left accordion-margin">         
                    <input type="checkbox" id="Tactial">
                </label>          
                <a class="accordion-toggle category pull-left" data-toggle="collapse" data-parent="#parent" href="#category1">5.11 Tactial<i class="icon-ok-sign success-color"></i>
                </a>
<span class="tooltip-demo pull-left"><a class="accordion-toggle category" data-original-title="push special discount offer to the retailer" rel="tooltip" data-placement="right" href="#">(Push Special Discount)</a></span>
<div data-toggle="collapse" data-parent="#parent" href="#category1" class="head-height">&nbsp;</div>


            </div><!--/accordion-heading-->
            <div id="category1" class="accordion-body collapse">
              <ul class="accordion-inner unstyled">
                <li id="" class="sidelink clearfix">        
                        <input type="checkbox" id="Women">

                    <a href="">Women</a>
                </li>
                <li id="" class="sidelink clearfix">

                        <input type="checkbox" id="Customer-Is-Anonymous">

                    <a href="">Men</a>
                </li>
              </ul>
            </div><!--/Apparel End-->
          </div>
          <div class="accordion-group">
            <div class="accordion-heading clearfix">
                <label class="checkbox pull-left accordion-margin">         
                        <input type="checkbox" id="Juary" class="regular-checkbox"><label for="Juary"></label>
                </label>
                <a class="accordion-toggle category pull-left" data-toggle="collapse" data-parent="#parent" href="#category2">Juary</a>
                <span class="tooltip-demo pull-left"><a class="accordion-toggle category" data-original-title="push special discount offer to the retailer" href="#" rel="tooltip" data-placement="right">(Push Special Discount)</a></span>
                <div data-toggle="collapse" data-parent="#parent" href="#category2" class="head-height">&nbsp;</div>

            </div><!--/accordion-heading-->
             <div id="category2" class="accordion-body collapse">
              <ul class="accordion-inner unstyled">
                <li id="" class="sidelink clearfix">        
                        <input type="checkbox" id="Furniture">
                <a href=""> Furniture (Subscribed) </a>
                </li>
                <li id="" class="sidelink clearfix">        
                        <input type="checkbox" id="Accessories">
                <a href="">Home Accessories</a>
                </li>
              </ul>
            </div>

          </div>
          <div class="accordion-group">
            <div class="accordion-heading clearfix">
                <label class="checkbox pull-left accordion-margin">         
                        <input type="checkbox" id="Dickies" class="regular-checkbox"><label for="Dickies"></label>
                </label>
                <a class="accordion-toggle category pull-left" data-toggle="collapse" data-parent="#parent" href="#category3">Dickies</a>
                <span class="tooltip-demo pull-left"><a class="accordion-toggle category" data-original-title="push special discount offer to the retailer" href="#" rel="tooltip" data-placement="right">(Push Special Discount)</a></span>
                <div data-toggle="collapse" data-parent="#parent" href="#category3" class="head-height">&nbsp;</div>

            </div><!--/accordion-heading-->
             <div id="category3" class="accordion-body collapse">
              <ul class="accordion-inner unstyled">
                <li id="" class="sidelink clearfix">        
                        <input type="checkbox" id="Shoe">
                <a href="">Shoe</a>
                </li>
                <li id="" class="sidelink clearfix">    
                        <input type="checkbox" id="Swaters">
                <a href="">Swaters</a>
                </li>
              </ul>
            </div>

          </div>
          <div class="accordion-group">
            <div class="accordion-heading clearfix">
                <label class="checkbox pull-left accordion-margin">         
                        <input type="checkbox" id="Puma" class="regular-checkbox"><label for="Puma"></label>
                </label>
                <a class="accordion-toggle category pull-left" data-toggle="collapse" data-parent="#parent" href="#category4">Puma</a>
                <span class="tooltip-demo pull-left"><a class="accordion-toggle category" data-original-title="push special discount offer to the retailer" href="#" rel="tooltip" data-placement="right">(Push Special Discount)</a></span>
             <div data-toggle="collapse" data-parent="#parent" href="#category4" class="head-height">&nbsp;</div>   

            </div><!--/accordion-heading-->
             <div id="category4" class="accordion-body collapse">
              <ul class="accordion-inner unstyled">
                <li id="" class="sidelink clearfix">        
                        <input type="checkbox" id="Appearel">
                <a href="">Appearel</a>
                </li>
                <li id="" class="sidelink clearfix">
                        <input type="checkbox" id="Sports">
                <a href=""> Sports</a>
                </li>
                <li id="" class="sidelink clearfix">
                        <input type="checkbox" id="Spickes">
                <a href=""> Red Spickes Shoe</a>
                </li>
                <li id="" class="sidelink clearfix">
                        <input type="checkbox" id="Soccer">
                <a href=""> Soccer Shoe</a>
                </li>
              </ul>
            </div>

          </div>
        </div>
      </div>
    </div>
        </section>


//collapsible menu
 $('#tabFAQ a').click(function(e) {
        e.preventDefault();
        $(this).tab('show');
    })

    $('.expandcollapse').click(function() {

        var newstate = $(this).attr('state') ^ 1,
            icon = newstate ? "minus" : "plus",
            text = newstate ? "Collapse" : "Expand";

        $('.nav-tabs').children().each(function(index) {
            if($(this).hasClass('active')) {
                var tab = $(this).children(':first');
                toggleTab(tab.prop('hash'));
                tab.attr('state',newstate);
            }
        });

        $(this).html("<i class=\"icon-white icon-" + icon + "-sign\"></i> " + text +" All");

        $(this).attr('state',newstate)

    });

    $('a[data-toggle="tab"]').on('shown', function (e) {

        var myState = $(this).attr('state'),
            state = $('.expandcollapse').attr('state');

        if(myState != state) {
          toggleTab($(this).prop('hash'));
          $(this).attr('state',state);
        }

    })

    function toggleTab(id){

        $(id).find('.collapse').each(function() {
            $(this).collapse('toggle');
          });

    }

After examine you code, The toggle action has another problem. If you manually open every one of the accordions until you have all open. Then if you press "Expand All" they will all close :D — Ignacio Correia, Dec 27 '12 at 18:17
My suggestion is divide in 2 button: expand all and close all. And toggle.fade the buttons. What you think? — Ignacio Correia, Dec 27 '12 at 18:17

score 1 · Answer 1 · edited May 23 '17 at 11:44

The key is to use tree-traversal to find the relevant accordion divs, then collapse only the ones that are expanded (or show the ones that are collapsed, based on your "state" flag).

See http://jsfiddle.net/jhfrench/mc4Qd/ for a working example of what you're trying to do.

A few notes:

I wrote the solution to be reusable so that you could have multiple sections containing expand/collapse button that interact with the accordion within that section( or div, like the 3rd block):
```
$(this).siblings('div').find( ...
```
We don't want to indiscriminately show all the div.accordion-body, because that would (re)animate blocks that are already shown. JQuery's "not selector" (:not(.in)) does the trick:
```
find('div.accordion-body:not(.in)').collapse('show');
```
We don't want to indiscriminately hide all the div.accordion-body, because that would (re)animate blocks that are already hidden. So we'll look for div that are both .accordion-body and .in ('div.accordion-body.in'; shout out to Sasha Chedygov for the assist):
```
find('div.accordion-body.in').collapse('hide');
```

score 0 · Answer 2 · answered May 06 '15 at 14:01

0

Try this: http://www.bootply.com/peFUdnwOpZ It should help what you are looking for.

answered May 06 '15 at 14:01

Preeti

1

1

Please include the code in your answer, as the link may not be available to everyone. – Sarah Elan May 06 '15 at 14:06

Expand collapse all divs at one time

2 Answers2