Hit enter after type your search item

Bootstrap accordion with toggle button: 3 demos

The Bootstrap accordion

In this tutorial, the accordion in Bootstrap is created by using the panel related classes along with collapse class; these are built-in Bootstrap framework classes.

In addition, the toggle icon is also added on the panels of the accordion to open and collapse the content of accordion.

Setting up Bootstrap for creating accordion

For creating the accordion, first of all, you need to include the Bootstrap CSS library. Add its reference in the <head> section of your webpage where you intend to create the accordion.

You also need to include the JS libraries of Bootstrap and jQuery for creating the accordion. (See this in the demo code below).

After including the references, use the markup where you need to add a few built-in classes like panel-group, panel, panel-heading etc. See demos below.

A demo of accordion with toggle icon

In this example, the accordion with three panels is created. The main div is assigned the panel-group class. The role data attribute is set as tablist while aria-multiselectable is set as true.

The panel with content div is assigned the panel and panel-default classes while its inner div contains the classes for panel heading, title, and content of the panel. The div showing the panel content is given the panel-body class along with collapse and panel-collapse classes. It will make the panel body collapsed as web page loads.

The icon of the panel (plus for collapsed and minus for open) are dealt there as well. Its functionality is done by using the jQuery code. Have a look at the live demo and code by clicking the image or link below:

bootstrap accordion

See online demo and code

In the style section, a few CSS classes built on Bootstrap framework are overridden, following is the CSS used:


 

The markup for creating accordion Bootstrap:


 

The small jQuery code for dealing with toggle:

 


 

As this is based on Bootstrap, so accordion is responsive and mobile friendly, by default.

A demo of simple accordion with links in panel headings

In this demo, a simple accordion based on Bootstrap is created by using the built-in classes. It uses the default style where headings in panels appear as links. By default, the panel body is collapsed.

bootstrap accordion simple

See online demo and code

The markup for this accordion:


 

A demo of using buttons rather links in panels

For the titles of accordions, you may use buttons as well rather than links in panels. Have a look at this demo where different buttons built on Bootstrap framework are used for opening and closing the content of accordion:

bootstrap accordion buttons

See online demo and code

The markup:


 

Again, the built-in classes to style the accordion are used. You may use the custom classes for adding borders, colors and other properties or override the existing ones.

This div height required for enabling the sticky sidebar