Ways to create Bootstrap accordion by collapse plugin

Bootstrap collapse

By using Twitter Bootstrap collapse plugin with transition plugin, you can create accordion or other collapsible navigation. This chapter is focused at the Bootstrap accordion by using the collapse plugin. Below are a few examples of creating accordion.

The accordion is a cool way of presenting information into your website if you have larger content. As you click on one ‘menu item’ or link the content inside the accordion expands that hides other content.

Bootstrap accordion example

The following example creates an accordion with three panels. By default first one is shown. You can change the expanded panel by adding “in” to the panel-collapse collapse class. Click on the following link to see it online:

Experience this online

Creating button accordion example with data attribute

The above example creates accordion with href or hyperlinks. This example shows how to create bootstrap accordion with the buttons. You simply need to use data-toggle=”collapse” data attribute to the button and data-target to the element which is the collapsible element. In that case, the element is collapsible div which is referred by id in data-target. See example below:

Experience this online

jQuery accordion example with bootstrap

You can also create accordion by using JavaScript. If you know a little about jQuery then it is quite easy to do in Javascript. Simply, use the .collapse method of the accordion in the click event of the button in jQuery section to show / hide the collapsible element. The example uses the same content as in the above example and the output is also the same, however, accordion is created by using the Javascript rather data attribute.

Experience this online

Also see The Bootstrap Tables | How to create Bootstrap Forms