Twitter Bootstrap Collapse JavaScript Plugin

Last update on August 19 2022 21:50:44 (UTC/GMT +8 hours)

Description

In this document, you will see how to create collapsible components with Twitter Bootstarp.

What is required

You must include jquery.js and bootstrap-collapse.js - these two JavaScript files. Both are located within docs/assets/js folder.

You may create collapsible components without writing a bit of JavaScript or by calling JavaScript.

Example

The first example shows how to create collapsible components without calling JavaScript.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>collapsible example</title>
    <link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
   <div class="container-fluid">
     <div class="accordion" id="accordion2">
            <div class="accordion-group">
              <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                  Click me to exapand. Click me again to collapse. Part I.
                </a>
              </div>
              <div id="collapseOne" class="accordion-body collapse" style="height: 0px; ">
                <div class="accordion-inner">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </div>
              </div>
            </div>
            <div class="accordion-group">
              <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
                 Click me to exapand. Click me again to collapse. Part II.
                </a>
              </div>
              <div id="collapseTwo" class="accordion-body collapse">
                <div class="accordion-inner">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </div>
              </div>
            </div>
            <div class="accordion-group">
              <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
                  Click me to exapand. Click me again to collapse. Part III.
                </a>
              </div>
              <div id="collapseThree" class="accordion-body collapse">
                <div class="accordion-inner">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </div>
              </div>
            </div>
          </div>
    </div>
	<script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
	<script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-collapse.js"></script>
</body>
</html>

View this example online.

Explanation

There three things to notice here, first, data-toggle="collapse" is added to the link on which you click to expand or collapse the component.

Secondly, an href or a data-target attribute is added to the parent component, whose value is the id of the child component.

Thirdly, a data-parent attribute is added for creating accordion like effect. The value of the data-parent attribute is same as the value of the id attribute of the main container div, holding the entire accordion component. If you wish to create a simple collapsible component, unlike accordion, you need not add this attribute.

Example

The second example shows how to create simple collapsible components.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>collapsible via JavaScript example</title>
    <link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="myCollapsibleExample"><a href="#demo" data-toggle="collapse">Click me to expand and click me again to collapse.</a></div>
<div id="demo" class="collapse">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehe.
</div>
<script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-collapse.js"></script>
</body>
</html>

View this example online

Call via JavaScript

You may use the following code to enable collapse via JavaScript.

 $(".collapse").collapse()

Options, Methods and Events

There are several Options, Methods and Events, which can be used with Bootstrap Collapsible JavaScript Plugin. Here are details:

Options

parent: Type of value is Selector. The default value is false. When the parent element is displayed. all collapsible elements under the parent is closed.

toggle: Type of value is Boolean. The default value is true. When called, all collapsible elements are toggled.

Methods

.collapse(options): Activates collapsible content. It accepts an optional option object.

.collapse('toggle'): A collapsible element is either shown or hidden.

.collapse('show'): A collapsible element is shown.

.collapse(hide): A collapsible element is hidden.

Events

show: When the show instance method is called, this event is fired.

shown: When a collapsed element is made visible, a wait is made for the CSS transition to be completed, and then, this event is fired.

hide:When the hide instance method is called, this event is fired.

hidden: When a collapsed element is has been hidden from the user, a wait is made for the CSS transition to be completed, and then, this event is fired

You may download all the HTML, CSS, JS and image files used in our tutorials here.

Previous: Twitter Bootstrap Button JavaScript Plugin