Bootstrap Collapse
Description
In this tutorial, you will learn how to create collapsible components using Bootstrap.
What is Required
You must reference jquery.js and bootstrap-collapse.js - both JavaScript files are located in the docs/assets/js folder.
You can create collapsible components without writing a lot of JavaScript or calling JavaScript.
Example
The first example demonstrates how to create a collapsible component without calling JavaScript.
Example
<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 expand. 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 expand. Click me again to collapse. Part II.
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
This is a Chinese to English translation. Please provide the English translation for this text. Do not provide any explanations or text apart from the translation.
Chinese: 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 expand. 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>
## Explanation
There are three points to note here. First, add `data-toggle="collapse"` to the link you want to click to expand or collapse the component.
Second, add an `href` or a `data-target` attribute to the parent component, with its value being the id of the child component.
Third, add a `data-parent` attribute to create an accordion-like effect. The value of the data-parent attribute is the same as the value of the id attribute of the main container div (holding the entire accordion component). If you want to create a simple collapsible component without the complexity of an accordion, you do not need to add this attribute.
## Example
The second example demonstrates how to create a simple collapsible component.
## Example
```html
<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>
Calling via JavaScript
You can trigger the collapse via JavaScript as follows:
$(".collapse").collapse()
Options, Methods, and Events
Here are some options, methods, and events used with the Bootstrap Collapsible JavaScript plugin, as shown below:
Options
parent: The value type is Selector. The default value is false. When the parent is shown, all collapsible elements under the parent are closed.
toggle: The value type is Boolean. The default value is true. Toggles all collapsible elements when called.
toggle: The value type is Boolean. The default value is true. Toggles all collapsible elements when called.
Methods
.collapse(options): Activates your content as collapsible content. Accepts an optional options object.
.collapse('toggle'): Toggles a collapsible element to shown or hidden.
.collapse('show'): Shows a collapsible element.
.collapse(hide): Hides a collapsible element.
Events
show: This event fires immediately when the show instance method is called.
shown: This event is fired when a collapsible element has been made visible to the user (will wait for CSS transitions to complete).
hide: This event is fired immediately when the hide instance method has been called.
hidden: This event is fired when a collapsible element has been hidden from the user (will wait for CSS transitions to complete).
Click here to download all HTML, CSS, JS, and image files used in this tutorial. ```