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.
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.
|.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.|
|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.
On click of the button a <div id=”collapseEx1″ ></div> is visible as shown in diagram 2.
Our collapse example is as shown in diagram 3.
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.