## Basic Collapsible
Collapsibles are useful when you want to hide and show large amount of content:
### Example
```
<button data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
```
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:
### Example
```
<a href="#demo" data-toggle="collapse">Collapsible</a>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
```
By default, the collapsible content is hidden. However, you can add the .in class to show the content by default:
### Example
```
<div id="demo" class="collapse in">
Lorem ipsum dolor text....
</div>
```