Skip to content

Instantly share code, notes, and snippets.

@PaulGwamanda
Last active August 30, 2017 11:00
Show Gist options
  • Select an option

  • Save PaulGwamanda/4b7eba9b81bb58c5ee72d73ca59558cc to your computer and use it in GitHub Desktop.

Select an option

Save PaulGwamanda/4b7eba9b81bb58c5ee72d73ca59558cc to your computer and use it in GitHub Desktop.
Collapse/Expand all panels on Single Click Event on panels
/** Collapse/Expand all bootstrap panels on Single Click Event on panels **/
$('#accordion .panel-default').on('click', function () {
$('#accordion .panel-collapse').collapse('toggle');
});
<div class="panel-group" id="accordion">
<!-- First Panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title" data-toggle="collapse" data-target="#collapseOne">
Collapsible Group Item #1
</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>
<!-- Second Panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title" data-toggle="collapse" data-target="#collapseTwo">
Collapsible Group Item #2
</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>
<!-- Third Panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title" data-toggle="collapse" data-target="#collapseThree">
Collapsible Group Item #3
</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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment