Collapsibles are useful when you want to hide and show large amount of content:
The .collapse class indicates a collapsible element (a < div > in our example); this is the content that will be shown or hidden with a click of a button.
To control (show/hide) the collapsible content, add the data-toggle="collapse" attribute to an < a > or a < button > element. Then add the data-target="#id " attribute to connect the button with the collapsible content (< div id="demo" >).
The following example shows a simple accordion by extending the panel component. The data-parent attribute is used to make sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.