Bootstrap Accordion

In this tutorial you will learn how to create accordion with Bootstrap.

Creating Accordion Widget with Bootstrap

Accordion menus and widgets are widely used on the websites to manage the large amount of content and navigation lists. With Bootstrap collapse plugin you can either create accordion or a simple collapsible panel without writing any JavaScript code.

The following example will show you how to build a simple accordion widget using the Bootstrap collapsible plugin and the panel component.

示例

Try this code »

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

```
    <div class="panel panel-default">
```
```
        <div class="panel-heading">
```
```
            <h4 class="panel-title">
```

                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">1. What is HTML?</a>

```
            </h4>
```
```
        </div>
```

        <div id="collapseOne" class="panel-collapse collapse">

```
            <div class="panel-body">
```

                <p>HTML stands for HyperText Markup Language. HTML is the standard markup language for describing the structure of web pages. <a href="http://www.qyoo.cn/html-tutorial/" target="_blank">Learn more.</a></p>

```
            </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">2. What is Bootstrap?</a>

```
            </h4>
```
```
        </div>
```

        <div id="collapseTwo" class="panel-collapse collapse in">

```
            <div class="panel-body">
```

                <p>Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. <a href="http://www.qyoo.cn/twitter-bootstrap-tutorial/" target="_blank">Learn more.</a></p>

```
            </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">3. What is CSS?</a>

```
            </h4>
```
```
        </div>
```

        <div id="collapseThree" class="panel-collapse collapse">

```
            <div class="panel-body">
```

                <p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. <a href="http://www.qyoo.cn/css-tutorial/" target="_blank">Learn more.</a></p>

```
            </div>
```
```
        </div>
```
```
    </div>
```
```
</div>
```

— 上面示例的输出将如下所示：

Bootstrap Accordion with Plus Minus Icons

You can also add plus minus icons to the Bootstrap accordion widget to make it visually more attractive with a few lines of jQuery code, as follow:

示例

Try this code »

```
<script type="text/javascript">
```
```
$(document).ready(function(){
```

    // Add minus icon for collapse element which is open by default

```
    $(".collapse.in").each(function(){
```

        $(this).siblings(".panel-heading").find(".glyphicon").addClass("glyphicon-minus").removeClass("glyphicon-plus");

```
    });
```
```
    
```

    // Toggle plus minus icon on show hide of collapse element

    $(".collapse").on('show.bs.collapse', function(){

        $(this).parent().find(".glyphicon").removeClass("glyphicon-plus").addClass("glyphicon-minus");

    }).on('hide.bs.collapse', function(){

        $(this).parent().find(".glyphicon").removeClass("glyphicon-minus").addClass("glyphicon-plus");

```
    });
```
```
});
```
```
</script>
```

— 上面示例的输出将如下所示：

Similarly, you can add arrow icon to a accordion utilizing the jQuery and CSS transition effect.

The show.bs.collapse and hide.bs.collapse in the example above are collapse events, you'll learn about the events little later in this chapter.

Expanding and Collapsing Elements via Data Attributes

You can use the Bootstrap collapse feature for expanding and collapsing any specific element via data attributes without using the accordion markup.

示例

Try this code »

```

```

<input type="button" class="btn" data-toggle="collapse" data-target="#toggleDemo" value="Toggle Button">

```
 
```
```

```

<div id="toggleDemo" class="collapse in"><p>This is a simple example of expanding and collapsing individual element via data attribute. Click on the <b>Toggle Button</b> button to see the effect.</p></div>

We've just created a collapsible control without writing any JavaScript code. Well, let's go through each part of this code one by one for a better understanding.

Explanation of Code

The Bootstrap collapse plugin basically requires the two elements to work properly — the controller element such as a button or hyperlink by clicking on which you want to collapse the other element, and the collapsible element itself.

The data-toggle="collapse" attribute (line no-2) is added to the controller element along with a attribute data-target (for buttons) or href (for anchors) to automatically assign the control of a collapsible element.
The data-target or href attribute accepts a CSS selector to apply the collapse to a specific element. Be sure to add the class .collapse to the collapsible element.
You can optionally add the class .in (line no-4) to the collapsible element in addition to the class .collapse to make it open by default.

To make the collapsible controls to work in group like accordion menu, you can utilize the Bootstrap panel component as demonstrated in the previous example.

Expanding and Collapsing Elements via JavaScript

You may also expand and collapse an individual element manually via JavaScript — just call the collapse() Bootstrap method with the id or class selector of the collapsible element in your JavaScript code.

示例

Try this code »

```

```

<input type="button" class="btn" value="Toggle Button">

```
 
```
```

```

<div id="toggleDemo" class="collapse in"><p>This is a simple example of expanding and collapsing individual element via JavaScript. Click on the <b>Simple Collapsible</b> button to see the effect.</p></div>

Options

There are certain options which may be passed to collapse() Bootstrap method to customize the functionality of a collapsible element.

Name	类型	Default Value	说明
parent	selector	false	All other collapsible elements under the specified parent will be closed while this collapsible item is shown on invocation.
toggle	boolean	true	Toggles the collapsible element on invocation.

You can also set these options using the data attributes on accordion — just append the option name to data-, like data-parent="#myAccordion", data-toggle="false" etc. as demonstrated in the basic implementation.

Methods

These are the standard bootstrap's collapse methods:

.collapse(options)

This method activates your content as a collapsible element.

示例

Try this code »

```
<script type="text/javascript">
```
```
$(document).ready(function(){
```
```
    $(".btn").click(function(){
```
```
        $("#myCollapsible").collapse({
```
```
            toggle: false
```
```
        });
```
```
    });
```
```
});
```
```
</script>
```

.collapse('toggle')

This method toggles (show or hide) a collapsible element.

示例

Try this code »

```
<script type="text/javascript">
```
```
$(document).ready(function(){
```
```
    $(".toggle-btn").click(function(){
```

        $("#myCollapsible").collapse('toggle');

```
    });
```
```
});
```
```
</script>
```

.collapse('show')

This method shows a collapsible element.

示例

Try this code »

```
<script type="text/javascript">
```
```
$(document).ready(function(){
```
```
    $(".show-btn").click(function(){
```

        $("#myCollapsible").collapse('show');

```
    });
```
```
});
```
```
</script>
```

.collapse('hide')

This method hides a collapsible element.

示例

Try this code »

```
<script type="text/javascript">
```
```
$(document).ready(function(){
```
```
    $(".hide-btn").click(function(){
```

        $("#myCollapsible").collapse('hide');

```
    });
```
```
});
```
```
</script>
```

Events

Bootstrap's collapse class includes few events for hooking into collapse functionality.

事件	说明
show.bs.collapse	This event fires immediately when the show instance method is called.
shown.bs.collapse	This event is fired when a collapse element has been made visible to the user. It will wait until the CSS transition process has been fully completed before getting fired.
hide.bs.collapse	This event is fired immediately when the hide method has been called.
hidden.bs.collapse	This event is fired when a collapse element has been hidden from the user. It will wait until the CSS transition process has been fully completed before getting fired.

The following example displays an alert message to the user when sliding transition of a collapsible element has been fully completed.

示例

Try this code »

```
<script type="text/javascript">
```
```
$(document).ready(function(){
```

    $("#myCollapsible").on('hidden.bs.collapse', function(){

        alert("Collapsible element has been completely closed.");

```
    });
```
```
});
```
```
</script>
```

Bootstrap Accordion

Creating Accordion Widget with Bootstrap

示例

Bootstrap Accordion with Plus Minus Icons

示例

Expanding and Collapsing Elements via Data Attributes

示例

Explanation of Code

Expanding and Collapsing Elements via JavaScript

示例

Options

Methods

.collapse(options)

示例

.collapse('toggle')

示例

.collapse('show')

示例

.collapse('hide')

示例

Events

示例

关于我们

联系方式

互动工具