Bootstrap 3.0 - Keep Accordions Open

by bizamajig

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 id="collapse-init" class="btn btn-primary"> Disable accordion behavior </button>
<br/>
<br/>
<div class="panel-group" id="accordion">
	<!-- First Panel -->
	<div class="panel panel-default">
		<div class="panel-heading">
			<h4 class="panel-title accordion-toggle collapsed"
                 data-toggle="collapse" 
                 data-target="#collapse-1"
			>
				Collapsible Group Item #1
			</h4>
		</div>
		<div id="collapse-1" class="panel-collapse collapse">
			<div class="panel-body"> Anim pariatur cliche reprehenderit, 
				enim eiusmod high life accusamus terry richardson ad squid. </div>
		</div>
	</div>
	<!-- Second Panel -->
	<div class="panel panel-default">
		<div class="panel-heading">
			<h4 class="panel-title accordion-toggle collapsed" 
                 data-toggle="collapse" 
                 data-target="#collapse-2"
			>
				Collapsible Group Item #2
			</h4>
		</div>
		<div id="collapse-2" class="panel-collapse collapse">
			<div class="panel-body"> Anim pariatur cliche reprehenderit, 
				enim eiusmod high life accusamus terry richardson ad squid. </div>
		</div>
	</div>
	<!-- Third Panel -->
	<div class="panel panel-default">
		<div class="panel-heading">
			<h4 class="panel-title accordion-toggle collapsed"
                 data-toggle="collapse"
                 data-target="#collapse-3"
			>
				Collapsible Group Item #3
			</h4>
		</div>
		<div id="collapse-3" 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>

CSS

.panel-title:hover {
     cursor: pointer;
}
.panel-heading .accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
    content: "\e114";    /* adjust as needed, taken from bootstrap.css */
    float: right;        /* adjust as needed */
    color: grey;         /* adjust as needed */
}
.panel-heading .accordion-toggle.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\e080";    /* adjust as needed, taken from bootstrap.css */
}

JavaScript

var active = true;

    $('#collapse-init').click(function () {
        if (active) {
            active = false;
            $('.panel-collapse').collapse('show');
            $('.panel-title').attr('data-toggle', '');
            $(this).text('Enable accordion behavior');
        } else {
            active = true;
            $('.panel-collapse').collapse('hide');
            $('.panel-title').attr('data-toggle', 'collapse');
            $(this).text('Disable accordion behavior');
        }
    });
    
// Enforce Accordion behavior, only one open at a time.
    if ( false ) $('#accordion').on('show.bs.collapse', function () {
        if (active) $('#accordion .in').collapse('hide');
    });