a blog for those who code

Tuesday 14 July 2015

Enhance Data Display using Accordion in Bootstrap

In this post we are going to learn about enhancing data display using accordion in Bootstrap. In our previous posts we have seen that how using a simple navbar, our navigation enhanced on a single page and how we can enhance data display using Tabs and using Scrollspy. The accordion display is similar to tabs where the user can see only one piece of data at any given time but it displays the data vertically. The display of data in Accordion is vertically where each pane is a collapsible region.


Accordion is a little bit of a cross between Tabs and Scrollspy. In tabs you will have a horizontal list and then the content changes page by page however in accordion the display is vertical, but like tabs it is going to have only one section at a time.

The first step of adding accordion to your page is to add an accordion container. The accordion is built using the panel capabilities of Bootstrap. You need to add panel-group class and an Id to the div tag like below.

<div class="panel-group" id="acc1">
//accordion content
</div>

Now each collapsible section will be a panel inside a panel group so you need to add another panel inside the above panel with classes panel and panel-default like

<div class="panel panel-default">
//panel content
</div>

Now each panel needs a heading and a section for the content. The heading can be created by adding a container with class panel-heading. Inside the panel-title we need a link to enable the collapsing feature of the panel which should have data-toggle="collapse" and data-parent and href. The data-parent set to the id of the panel-group container and href set to the id of the content panel as shown below.

<div class="panel-heading">
    <h2 class="panel-title">
        <a data-toggle="collapse" data-parent="#acc1" href="#acc2">
        //heading
        </a>
    </h2>
</div>

The panel content needs two container. The outer container should have an id assigned to href in the code above and should have panel-collapse and collapse classes. The inner container should have a class called panel-body.

<div id="acc2" class="panel-collapse collapse">
    <div class="panel-body">
    //content
    </div>
</div>

Accordion Example :

<div class="panel-group" id="acc">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h2 class="panel-title">
<a data-toggle="collapse" data-parent="#acc" href="#acc1">
First Section
</a>
      </h2>
    </div>
    <div id="acc1" class="panel-collapse collapse in">
      <div class="panel-body">
      //content
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h2 class="panel-title">
        <a data-toggle="collapse" data-parent="#acc" href="#acc2">
Second Section
</a>
      </h2>
    </div>
    <div id="acc2" class="panel-collapse collapse">
      <div class="panel-body">
      //content
     </div>
   </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h2 class="panel-title">
        <a data-toggle="collapse" data-parent="#acc" href="#acc3">
Third Section
</a>
      </h2>
    </div>
    <div id="acc3" class="panel-collapse collapse">
      <div class="panel-body">
      //content
      </div>
    </div>
  </div>
</div>

Result :

Please Like and Share the Blog, if you find it interesting and helpful.

No comments:

Post a Comment