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.

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.