OpenSourceVarsity

pdf icons

Bootstrap Accordion / Collapse Tutorial

To manage large amount of website data, you can use Bootstrap’s collapse plugin. The collapse plugin makes it easy to create collapsing divisions on a web page. Using this technique a more information can be delivered within the same, limited, webpage real estate.

NOTE: If you want to include this plugin functionality individually, then you will need collapse.js. This also requires the Transition Plugin to be included in your version of Bootstrap. If you are using bootstrap.js OR bootstrap.min.js both collapse and transition plugins are included.

Click to download all collapse examples

Expanding and Collapsing Elements via Data Attributes

Use the Bootstrap collapse feature for expanding and collapsing any specific element via data attributes without using the accordion markup.

Use <a></a> with the href attribute, or a <button> with the data-target attribute to show and hide another element on the page. In both cases, the data-toggle=”collapse” is required.

Expanding and Collapsing Elements via JavaScript

Expand and collapse an individual element manually via JavaScript. Just call the collapse() function in bootstrap with the “id” or “class” selector of the collapsible element in your JavaScript code.

Collapse Methods

Method Name Description
.collapse(options) This method activates your content as a collapsible element.
.collapse(‘toggle’) This method toggles (show or hide) a collapsible element.
.collapse(‘show’) This method shows a collapsible element.
.collapse(‘hide’) This method hides a collapsible element.

Collapse Events

Event Type Description
show.bs.collapse This event fires immediately when the show instance method is called.
shown.bs.collapse This event is fired when a collapse element has been made visible to the user. It will wait until the CSS transition process has been fully completed before getting fired.
hide.bs.collapse This event is fired immediately when the hide method has been called.
hidden.bs.collapse This event is fired when a collapse element has been hidden from the user. It will wait until the CSS transition process has been fully completed before getting fired.

We have created an example for show / hide an element on click of a button as shown in diagram 1.

Bootstrap Accordions Diagram 1

On click of the button a <div id=”collapseEx1″ ></div> is visible as shown in diagram 2.

Bootstrap Accordions Diagram 2

Our collapse example is as shown in diagram 3.

Bootstrap Accordions Diagram 3

Click to download all collapse examples

If you are a competent HTML5 / CSS3 / -JavaScript programmer we are sure you will be able to change the code of the web page modal window we’ve written to make the code snappier and perhaps a tad shorter.

Feel free to do so. If you would like to share your code with others via OpenSourceVarsity please drop us an Email and we’d be happy to put up your code spec for download via our website.

Should you have any queries about the collapse examples code do post these in the Bootstrap 3 section of the OpenSourceVarsity forum.

We really do make special efforts to help, having said that, we really cannot re-write/edit code blocks for you.

Click to download all collapse examples

 

October 24, 2016
Design by Ivan Bayross and Meher Bala © 2017 All Rights Reserved
X