Bootstrap 3.0 -Keep Accordions Open

by silb3r

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<button class="collapse-init">Click to disable accordion behavior</button>
<br>
<br>
<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
             <h4 class="panel-title">
        <p data-toggle="collapse" data-target="#collapseOne">
          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.</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
             <h4 class="panel-title">
        <p data-toggle="collapse" data-target="#collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>

        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
             <h4 class="panel-title">
        <p data-toggle="collapse" data-target="#collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>

        </div>
        <div id="collapseThree" class="panel-collapse collapse">
            <div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.</div>
        </div>
    </div>
</div>
<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;    
            background:lightgray;width:100%;'>For this SO Question: <a...

CSS

p:hover { cursor: pointer; }

JavaScript

$(function () {

    var active = true;

    $('.collapse-init').click(function () {
        if (active) {
            active = false;
            $('.panel-collapse').collapse('show');
            $('.panel-title > p').removeAttr('data-toggle');
            $(this).html('Click to enable accordion behavior');
        } else {
            active = true;
            $('.panel-title > p').attr('data-toggle', 'collapse');
            $('.panel-collapse').collapse('hide');
            $(this).html('Click to disable accordion behavior');
        }
    });
    $('#accordion').on('show.bs.collapse', function () {
        if (active) {
            $('#accordion .in').collapse('hide');
        }
    });

});