Bootstrap Collapse Plugin

Bootstrap Collapse plugin helps to collapse the web page content and toggle its visibility across the application. The plugin helps to divide the page content and makes it easy to collapse and also supports many content options like an accordion.

Approach:

Bootstrap offers some JavaScript functions as an attribute and the collapse JavaScript plugin comes with an attribute named data-*.

To toggle any data:

• The data-toggle attribute is set to collapse in your toggle button.
• The data-target is set to the class or id of a div you want to toggle.
• Set the div class to data-toggle=collapse  which you want to toggle so that the data is not visible initially.

Example 1:

Output:

Example 2: In an accordion, you might need another attribute named data-parent which ensures that all the collapsible elements under the given parent are closed if one of the items is shown. For such cases set the data-parent attribute to the id or class of the container div.

Output:

Supported Browser:

• Google Chrome
• Microsoft Edge
• Firefox
• Opera
• Safari