Dashboard 1

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">).
Note: For <a> elements, you can use the href attribute instead of the data-target attribute:
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-parent attribute to make sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.