Dashboard 1

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.