Bootstrap Collapse

We use collapsible when we need to show or hide the content.

Basic Collapse

Code Structure
<div class="container">
    <button data-toggle="collapse" data-target="#clickme1" class="btn btn-primary">Click Me</button>
    <div id="clickme1" class="collapse">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
    </div>
</div>

Collapse with content visible at begining

By default, collapsible content is hidden. If you want to show the content you can add .in class

Code Structure
<div class="container">
    <button data-toggle="collapse" data-target="#clickme2" class="btn btn-primary">Click Me</button>
    <div id="clickme2" class="collapse in">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
    </div>
</div>

Collapsible Panel

Code Structure
<div class="container">
    <div class="panel-group">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a href="#clickpanel1" data-toggle="collapse">Collapsible Panel</a>
                </h4>
            </div>
            <div id="clickpanel1" class="collapse">
                <div class="panel-body">Panel Body</div>
                <div class="panel-footer">Panel Footer</div>
            </div>
        </div>
    </div>
</div>

Collapsible List Group

Code Structure
<div class="container">
    <div class="panel-group">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a href="#clickpanel2" data-toggle="collapse">Collapsible List Group</a>
                </h4>
            </div>
            <div id="clickpanel2" class="panel-collapse collapse">
                <ul class="list-group">
                    <li class="list-group-item">Item 1</li>
                    <li class="list-group-item">Item 2</li>
                    <li class="list-group-item">Item 3</li>
                </ul>
            </div>
        </div>
    </div>
</div>

Share this

Related Posts