Dashboard

The .collapseclass 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">).
Note:For <a> elements, you can use the hrefattribute instead of the data-targetattribute:
Note:For <button> elements, you can use the data-toggle="collapse"attribute instead of the data-target="#basic-collapse"attribute:

The following example shows a collapsible panel:

The following shows a collapsible panel with a list group inside:

Note:Use the data-parentattribute to make sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.