BS3 - Collapse All

by Hak-Lo Chan

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container coll-expan-panel">
    <div class="row">
         <h1 class="page-header">Bootstrap Multiple Expand/Collapse</h1>

        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
          <div class="pull-right"> <a id="expand-collapse" href="#" class="btn btn-default btn-expand" role="button">Expand All</a>
            <div class="pull-right"> <a id="expandAll" href="#" class="btn btn-default" role="button">Expand All</a>

                <a id="collapseAll" href="#" class="btn btn-default" role="button">Collapse All</a>
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <div class="panel-group" id="accordion">
                <div class="panel panel-default">
                    <div class="panel-heading">
                         <h4 class="panel-title">
                              <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" class="">
                                Collapsible Group Item #1
                              </a>
                            </h4>

                    </div>
                    <div id="collapseOne" class="panel-collapse collapse">
                        <div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
                            richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard
                            dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf
                            moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
                            assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore
                            wes anderson cred nesciunt sapiente ea proident. Ad vegan...

JavaScript

$(function () {         
    $('a[data-toggle="collapse"]').on('click',function(){
        var objectID=$(this).attr('href');
        if($(objectID).hasClass('in')) {
            $(objectID).collapse('hide');
        } else {
            $(objectID).collapse('show');
        }
    });

    $('#expand-collapse').on('click',function(){
        $(this).toggleClass('btn-collapse').toggleClass('btn-expand');
        $(this).text($(this).text() == 'Expand All' ? 'Collapse All' : 'Expand All');
    });
    $('.coll-expan-panel').on('click','#expand-collapse.btn-expand', function(){
        $('.coll-expan-panel .panel-collapse').collapse('hide');
    });
    $('.coll-expan-panel').on('click','#expand-collapse.btn-collapse', function(){
        $('.coll-expan-panel .panel-collapse').collapse('show');
    });

    $('#expandAll').on('click',function(){
        $('.coll-expan-panel .panel-collapse').collapse('show');
    });
    $('#collapseAll').on('click',function(){
        $('.coll-expan-panel .panel-collapse').collapse('hide');
    });
});