Post
Ask Question

Designing Accordion Using Panel In Bootstrap

Designing Accordion Using Panel In Bootstrap
Before designing or writing the code, let us understand the basic structure of the code. This is just an outline diagram to understand the basic concept when we design an accordion using panel and panel group. First of all, we need to create a group of panels with a panel group class. Within this <div> block, we can take as many panels as we want, as following.
Designing Accordion Using Panel In Bootstrap
In the above diagram, you can see that we use the main div structure within which we are using a required div with the bootstrap class to develop this accordion. After understanding the very basic structure, we have to remember the following things before coding.
  • Take the main div as a parent for all other divisions inside the main div.
  • Give an ID to the main div which is used by the child div with data-parent atrribute.
  • Take a required div element inside the main div with panel and panel-default or panel-success, panel-danger or customize class whatever you want. I used panel-default with panel class.
  • Use <a> tag inside the panel-heading section of each panel with data-toggle="collpapse". I am using <a></a>  tag; you can use any other tag for a clickable heading inside the panel-heading.
  • Remember to use the main div id with data-parent attribute like data-parent="#id" with <a> </a> element inside the panel-heading section of each child panel.
  • Keep the panel body in a separate div with the panel -collapse class. You can also take the panel -footer inside this block if you want.
 Let's start coding now to develop an accordion using panel.
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title></title>  
  5.     <link href="Content/bootstrap.css" rel="stylesheet" />  
  6.     <script src="Scripts/jquery-1.9.1.js"></script>  
  7.     <script src="Scripts/bootstrap.js"></script>  
  8.       
  9. </head>  
  10. <body>  
  11.   
  12.   
  13.     <div class="container">  
  14.         <br />  
  15.   
  16.         <h1 class="text-center">Accordion with panle </h1>  
  17.         <br /><br />  
  18.   
  19.         <div class="col-md-offset-2 col-md-10">  
  20.             <div class="panel-group" id="accordian1">  
  21.                 <div class="panel panel-default">  
  22.                     <div class="panel-heading">  
  23.                         <h4 class="panel-title">  
  24.                             <a href="#pan1" data-toggle="collapse" data-parent="#accordian1">Accordian Section 1</a>  
  25.                         </h4>  
  26.                     </div>  
  27.                     <div class="panel-collapse" id="pan1">  
  28.                         <div class="panel-body">  
  29.                             this is accordian area  
  30.                         </div>  
  31.                         
  32.   
  33.                     </div>  
  34.                 </div>  
  35.                 <div class="panel panel-default">  
  36.                     <div class="panel-heading">  
  37.                         <h4 class="panel-title">  
  38.                             <a href="#pan2" data-toggle="collapse" data-parent="#accordian1">Accordian Section 2</a>  
  39.                         </h4>  
  40.                     </div>  
  41.                     <div class="collapse panel-collapse" id="pan2">  
  42.                         <div class="panel-body">  
  43.                             this is accordian area  
  44.                         </div>  
  45.   
  46.                     </div>  
  47.                 </div>  
  48.                 <div class="panel panel-default">  
  49.                     <div class="panel-heading">  
  50.                         <h4 class="panel-title">  
  51.                             <a href="#pan3" data-toggle="collapse" data-parent="#accordian1">Accordian Section 3</a>  
  52.                         </h4>  
  53.                     </div>  
  54.                     <div class="collapse panel-collapse" id="pan3">  
  55.                         <div class="panel-body">  
  56.                             this is accordian area  
  57.                         </div>  
  58.   
  59.                     </div>  
  60.                 </div>  
  61.             </div>  
  62.         </div>  
  63.     </div>  
  64. </body>  
  65. </html>  
 Here is how it will be displayed in the browser.
Designing Accordion Using Panel In Bootstrap 
I hope my effort will help you to improve your knowledge base. I  will surely try my best to provide you with various articles for different technolgoies to give you knowledge.
Next Recommended Reading Bootstrap Modal PopUp Using ASP.NET MVC