❮ Bootstrap Carousel Plugin Bootstrap Tab Plugin ❯

Bootstrap Collapse Plugin

The Collapse plugin makes it easy to collapse sections of a page. Whether you use it to create collapsible navigation or content panels, it offers many content options.

collapse.js. Additionally, you need to include the Transition plugin in your Bootstrap version. Alternatively, as mentioned in the Bootstrap Plugins Overview chapter, you can include bootstrap.js or the compressed bootstrap.min.js.

You can use the Collapse plugin as follows:

Example

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" 
                href="#collapseOne">
                Click me to expand, click me again to collapse. Part 1
                </a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
                cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
                vice lomo.
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" 
                href="#collapseTwo">
                Click me to expand, click me again to collapse. Part 2
            </a>
            </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
        <div class="panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
            cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
            vice lomo.
        </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" 
                href="#collapseThree">
                Click me to expand, click me again to collapse. Part 3
                </a>
            </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse">

<div class="panel-body">
    Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
    cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
    vice lomo.
</div>
</div>
</div>
</div>

Results are shown below:

data-toggle="collapse" should be added to the link of the component you want to expand or collapse.
The href or data-target attribute should be added to the parent component, with its value being the id of the child component.
The data-parent attribute should add the id of the accordion to the link of the component to be expanded or collapsed.
As shown below:

Example

<button type="button" class="btn btn-primary" data-toggle="collapse" 
    data-target="#demo">
    Simple collapsible component
</button>    
<div id="demo" class="collapse in">
    Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
    cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
    vice lomo.
</div>

Results are shown below:

As you can see in the example, we created a collapsible component, unlike the accordion, where we did not add the data-parent attribute.

Usage

The following table lists the classes used by the Collapse plugin to handle the heavy lifting:

Class	Description	Example
.collapse	Hides the content.	Try it
.collapse.in	Shows the content.	Try it
.collapsing	Added when the transition starts and removed when it finishes.

You can use the Collapse plugin in two ways:

Via data attributes: Add data-toggle="collapse" and data-target to the element to automatically assign control of a collapsible element. The data-target attribute accepts a CSS selector and applies the collapse effect to it. Make sure to add the class .collapse to the collapsible element. If you want it to be open by default, add an additional class .in.

To add accordion-like group management to a collapsible control, add the data attribute data-parent="#selector".

Via JavaScript: Activate the collapse method via JavaScript, as shown below:
```
$('.collapse').collapse()
```

Options

Some options can be passed via data attributes or JavaScript. The following table lists these options:

Option Name	Type/Default Value	Data Attribute Name	Description
parent	selector <br> Default: false	data-parent	If a selector is provided, all collapsible elements under the specified parent will be closed when this collapsible item is shown. This mimics the traditional accordion behavior - this relies on the accordion-group class.
toggle	boolean <br> Default: true	data-toggle	Toggles the collapsible element on invocation.

Methods

Here are some useful methods in the Collapse plugin:

| Method | Description | Example | | --- | --- | --- |

| Options: .collapse(options) | Activate the collapsible element. Accepts an optional options object. | $('#identifier').collapse({<br>    toggle: false<br>}) |
| Toggle: .collapse('toggle') | Toggles the display/hide of the collapsible element. | $('#identifier').collapse('toggle') |
| Show: .collapse('show') | Displays the collapsible element. | $('#identifier').collapse('show') |
| Hide: .collapse('hide') | Hides the collapsible element. | $('#identifier').collapse('hide') |

### Example

The following example demonstrates the usage of the methods:

## Example

<div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> Click me to expand, click me again to collapse. Part 1 -- hide method </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body"> Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. </div> </div> </div> <div class="panel panel-success"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> Click me to expand, click me again to collapse. Part 2 -- show method </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. </div> </div> </div> <div class="panel panel-info"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> Click me to expand, click me again to collapse. Part 3 -- toggle method </a> </h4>

</div>
<div id="collapseThree" class="panel-collapse collapse">
    <div class="panel-body">
        Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred 
        nesciunt sapiente ea proident. Ad vegan excepteur butcher vice 
        lomo.
    </div>
</div>
</div>
<div class="panel panel-warning">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" 
            href="#collapseFour">
            Click me to expand, click me again to collapse. Part 4 - Options Method
            </a>
        </h4>
    </div>
    <div id="collapseFour" class="panel-collapse collapse">
        <div class="panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred 
            nesciunt sapiente ea proident. Ad vegan excepteur butcher vice 
            lomo.
        </div>
    </div>
</div>
</div>
<script>
$(function () { $('#collapseFour').collapse({
        toggle: false
    })});
    $(function () { $('#collapseTwo').collapse('show')});
    $(function () { $('#collapseThree').collapse('toggle')});
    $(function () { $('#collapseOne').collapse('hide')});
</script>

Result as shown below:

Events

The table below lists the events to be used in the Collapse plugin. These events can be used as hooks in functions.

Event	Description	Example
show.bs.collapse	This event fires immediately when the show instance method is called.	$('#identifier').on('show.bs.collapse', function () {<br> // Do something...<br>})
shown.bs.collapse	This event is fired when the collapse element becomes visible to the user (will wait for CSS transitions to complete).	$('#identifier').on('shown.bs.collapse', function () {<br> // Do something...<br>})
hide.bs.collapse	This event is fired immediately when the hide instance method has been called.	$('#identifier').on('hide.bs.collapse', function () {<br> // Do something...<br>})
hidden.bs.collapse	This event is fired when the collapse element has been hidden from the user (will wait for CSS transitions to complete).	$('#identifier').on('hidden.bs.collapse', function () {<br> // Do something...<br>})

Example

The following example demonstrates the use of events:

Example

<div class="panel-group" id="accordion">
    <div class="panel panel-info">

<div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseexample"> Click me to expand, click me again to collapse. --shown event </a> </h4> </div> <div id="collapseexample" class="panel-collapse collapse"> <div class="panel-body"> Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. </div> </div> </div> </div>

❮ Bootstrap Carousel Plugin Bootstrap Tab Plugin ❯