expand ALL or collapse ALL in twitter bootstrap

http://stackoverflow.com/questions/14050764/expand-all-or-collapse-all-in-twitter-bootstrap

by Jeromy French

HTML

<script src="http://appliedinter.net/Workstream/common_files/js/plugins.js"></script>
<script src="http://appliedinter.net/Workstream/common_files/js/script.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<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...

JavaScript

//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";
    
        // if state=0, show all the accordion divs within the same block (in this case, within the same section)
        if ( $(this).attr('state')==="0" ) {
            console.log('1');
            $(this).siblings('div').find('div.accordion-body:not(.in)').collapse('show');
        }
        // otherwise, collapse all the divs
        else {
            console.log('2');
            $(this).siblings('div').find('div.accordion-body.in').collapse('hide');
        }

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

    }