Bootstrap Accordion

In this tutorial you will learn how to create accordion with Bootstrap.

Creating Accordion Widget with Bootstrap

Accordion widgets and menus are widely used on the websites to manage the large amount of content and navigation lists. With Bootstrap collapse plugin you can either create accordion or a simple collapsible panel without writing any JavaScript code.

The following example will show you how to build a simple accordion widget using the Bootstrap collapsible plugin and the panel component.

  • <div id="accordion" class="panel-group">
  •     <div class="panel panel-default">
  •         <div class="panel-heading">
  •             <h4 class="panel-title">
  •                 <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">1. What is HTML?</a>
  •             </h4>
  •         </div>
  •         <div id="collapseOne" class="panel-collapse collapse">
  •             <div class="panel-body">
  •                 <p>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages. <a href="http://www.tutorialrepublic.com/html-tutorial/" target="_blank">Learn more.</a></p>
  •             </div>
  •         </div>
  •     </div>
  •     <div class="panel panel-default">
  •         <div class="panel-heading">
  •             <h4 class="panel-title">
  •                 <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">2. What is Bootstrap?</a>
  •             </h4>
  •         </div>
  •         <div id="collapseTwo" class="panel-collapse collapse in">
  •             <div class="panel-body">
  •                 <p>Bootstrap is a powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. <a href="http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank">Learn more.</a></p>
  •             </div>
  •         </div>
  •     </div>
  •     <div class="panel panel-default">
  •         <div class="panel-heading">
  •             <h4 class="panel-title">
  •                 <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">3. What is CSS?</a>
  •             </h4>
  •         </div>
  •         <div id="collapseThree" class="panel-collapse collapse">
  •             <div class="panel-body">
  •                 <p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. <a href="http://www.tutorialrepublic.com/css-tutorial/" target="_blank">Learn more.</a></p>
  •             </div>
  •         </div>
  •     </div>
  • </div>

— The output of the above example will look something like this:


Expanding and Collapsing Elements via Data Attributes

You can use the Bootstrap collapse feature for expanding and collapsing any specific element via data attributes without using the accordion markup.

  • <!-- Trigger Button HTML -->
  • <input type="button" class="btn" data-toggle="collapse" data-target="#toggleDemo" value="Toggle Button">
  • <!-- Collapsible Element HTML -->
  • <div id="toggleDemo" class="collapse in"><p>This is a simple example of expanding and collapsing individual element via data attribute. Click on the <b>Toggle Button</b> button to see the effect.</p></div>

We've just created a collapsible control without writing any JavaScript code. Well, let's go through each part of this code one by one for a better understanding.

Explanation of Code

The Bootstrap collapse plugin basically requires the two elements to work properly — the controller element such as a button or hyperlink by clicking on which you want to collapse the other element, and the collapsible element itself.

  • The data-toggle="collapse" attribute (line no-2) is added to the controller element along with a attribute data-target (for buttons) or href (for anchors) to automatically assign the control of a collapsible element.
  • The data-target or href attribute accepts a CSS selector to apply the collapse to a specific element. Be sure to add the class .collapse to the collapsible element.
  • You can optionally add the class .in (line no-4) to the collapsible element in addition to the class .collapse to make it open by default.

To make the collapsible controls to work in group like accordion menu, you can utilize the Bootstrap panel component as demonstrated in the previous example.


Expanding and Collapsing Elements via JavaScript

You may also expand and collapse an individual element manually via JavaScript — just call the collapse() Bootstrap method with the id or class selector of the collapsible element in your JavaScript code.

  • <!-- Trigger Button HTML -->
  • <input type="button" class="btn" value="Toggle Button">
  • <!-- Collapsible Element HTML -->
  • <div id="toggleDemo" class="collapse in"><p>This is a simple example of expanding and collapsing individual element via JavaScript. Click on the <b>Simple Collapsible</b> button to see the effect.</p></div>

Options

There are certain options which may be passed to collapse() Bootstrap method to customize the functionality of a collapsible element.

Name Type Default Value Description
parent selector false All other collapsible elements under the specified parent will be closed while this collapsible item is shown on invocation.
toggle boolean true Toggles the collapsible element on invocation.

You can also set these options using the data attributes on accordion — just append the option name to data-, like data-parent="#myAccordion", data-toggle="false" etc. as demonstrated in the basic implementation.


Methods

These are the standard bootstrap's collapse methods:

.collapse(options)

This method activates your content as a collapsible element.

  • <script type="text/javascript">
  • $(document).ready(function(){
  •     $(".btn").click(function(){
  •         $("#myCollapsible").collapse({
  •             toggle: false
  •         });
  •     });
  • });
  • </script>

.collapse('toggle')

This method toggles (show or hide) a collapsible element.

  • <script type="text/javascript">
  • $(document).ready(function(){
  •     $(".toggle-btn").click(function(){
  •         $("#myCollapsible").collapse('toggle');
  •     });
  • });
  • </script>

.collapse('show')

This method shows a collapsible element.

  • <script type="text/javascript">
  • $(document).ready(function(){
  •     $(".show-btn").click(function(){
  •         $("#myCollapsible").collapse('show');
  •     });
  • });
  • </script>

.collapse('hide')

This method hides a collapsible element.

  • <script type="text/javascript">
  • $(document).ready(function(){
  •     $(".hide-btn").click(function(){
  •         $("#myCollapsible").collapse('hide');
  •     });
  • });
  • </script>

Events

Bootstrap's collapse class includes few events for hooking into collapse functionality.

Event Description
show.bs.collapse This event fires immediately when the show instance method is called.
shown.bs.collapse This event is fired when a collapse element has been made visible to the user. It will wait until the CSS transition process has been fully completed before getting fired.
hide.bs.collapse This event is fired immediately when the hide method has been called.
hidden.bs.collapse This event is fired when a collapse element has been hidden from the user. It will wait until the CSS transition process has been fully completed before getting fired.

The following example displays an alert message to the user when sliding transition of a collapsible element has been fully completed.

  • <script type="text/javascript">
  • $(document).ready(function(){
  •     $("#myCollapsible").on('hidden.bs.collapse', function(){
  •         alert("Collapsible element has been completely closed.");
  •     });
  • });
  • </script>
 
Close

Your Feedback:

 

We would love to hear from you! Please say something.