Bootstrap Accordion for ASP.Net

As discussed before as well, the Bootstrap framework is a great tool that we can use for web applications to increase the functionalities as well as development time with rich look to the presentation.

Accordion is a way of displaying information in collapsible panels so that visitors can expand it and see as needed. By using such a way, we can keep the web page simple but with lot of details inside collapsible panels.

For example, consider a search page where you will have lot of controls for user to select different kinds of parameters to set for searching records. So the whole search will require 80% from page where you will have only 20% for displaying information as well as footer values.

We can simply introduce the collapsible panels known as Accordion with Bootstrap to this page and can have a nicer look. See below for example.

 <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">  
   <div class="panel panel-default">  
    <div class="panel-heading" role="tab" id="headingOne" data-toggle="collapse" data-parent="#accordion"  
      href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">  
      <h4 class="panel-title">  
       <span class="text-defaultcolor fa fa-search fa-2x text-titleSize17"></span>  
       HEADER TEXT   
      </h4>  
    </div>  
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">  
      <div class="panel-body">  
       BODY OF FIRST PANEL  
      </div>  
    </div>  
   </div>  
   <div class="panel panel-default">  
    <div class="panel-heading" role="tab" id="headingTwo" class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion"  
      href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">  
      <h4 class="panel-title">        
       <span class="text-defaultcolor fa fa-list fa-2x text-titleSize17"></span>  
       HEADER TEXT  
      </h4>  
    </div>  
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">  
      <div class="panel-body">  
       BODY OF SECOND PANEL  
      </div>  
    </div>  
   </div>  
 </div>  

If you copy this and try it on your application, you will see you will have two collapsible panels. You can open and close them by clicking on the header.

Further, you can dynamically open and close the required panels using JQuery. Look at the below code.

 function ShowSearchParameters() {    
   $('#collapseOne').collapse('show');  
   $('#collapseTwo').collapse('hide');  
 }  
 function ShowSearchResult() {    
   $('#collapseTwo').collapse('show');  
   $('#collapseOne').collapse('hide');  
 }  

calling these function, you will find it is very easy to deal with collapsible panels in Bootstrap with the help of JQuery.

Try it. If any issues, post under comments.