Bootstrap Collapse

Bootstrap collapse are useful if you want to hide a large amount of content. To use bootstrap collapse you have to add .collapse class inside a <div> tag. You also have to use data-toggle="collapse" and data-target="#id_name" inside <a> or <button> tag.

Example:

<a href="#text" data-toggle="collapse"> collapse link </a>

<div id="text" class="collapse">
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
</div>

Run Example

The content is hidden by default. If you want to display the content by default you can add .in class.

Example:

<a href="#text" data-toggle="collapse"> collapse link </a>

<div id="text" class="collapse in">
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
</div>

Run Example

Panels with Collapse

You can use bootstrap collapse with panels. Here is an example:

Example:

<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#text1" data-toggle="collapse"> Collapsible panel </a>
</h4>
</div>
<div id="text1" class="panel-collapse collapse">
<div class="panel-body">Panel body </div>
<div class="panel-footer">Panel footer </div>
</div>
</div>
</div>

Run Example

List Group with Collapse

You can use bootstrap collapse with list group. Here is an example:

Example:

<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#text1" data-toggle="collapse"> Collapsible list group </a>
</h4>
</div>
<div id="text1" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">1st list </li>
<li class="list-group-item">2nd list </li>
<li class="list-group-item">3rd list </li>
</ul>
<div class="panel-footer">Panel footer </div>
</div>
</div>
</div>

Run Example

Recommended Posts: