YouTip

The Collapse plugin makes it easy to collapse page sections. Whether you use it to create collapsible navigation or content panels, it provides many options. > !(#) If you want to reference the plugin's functionality separately, you need to reference **collapse.js**. Also, you need to reference the [Transition (Transition) plugin](#) in your Bootstrap version. Or, as mentioned in the (#) chapter, you can reference _bootstrap.js_ or the minified version _bootstrap.min.js_. You can use the Collapse plugin to: * _**Create collapsible groups or accordions**_, as shown below: ## Example [Try it »](#) The result is as follows:  1. Add **data-toggle="collapse"** to the link for the component you want to expand or collapse. 2. Add the **href** or **data-target** attribute to the parent component, with the value being the _id_ of the child component. 3. Add the **data-parent** attribute with the accordion's id to the link for the component to be expanded or collapsed. * _**Create a simple collapsible component without accordion markup**_, as shown below: ## Example Simple collapsible [Try it »](#) The result is as follows:  As you can see in the example, we created a collapsible component. Unlike the accordion, 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 of expanding/collapsing: | Class | Description | Example | | --- | --- | --- | | .collapse | Hides the content. | (#) | | .collapse.in | Shows the content. | (#) | | .collapsing | Added when a transition begins, removed when it completes. | | You can use the Collapse plugin in two ways: * **Via data attributes**: Add **data-toggle="collapse"** and a **data-target** to an element to automatically assign control of a collapsible element. The **data-target** attribute accepts a CSS selector to apply the collapse to. Be sure to add the class **.collapse** to the collapsible element. If you want it to be open by default, add the additional class **.in**. To add accordion-like group management to a collapsible control, add the data attribute **data-parent="#selector"**. * **Via JavaScript**: The collapse method can be activated via JavaScript, as follows: $('.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 _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 is analogous to the traditional accordion behavior - it relies on the accordion-group class. | | toggle | boolean _Default: true_ | data-toggle | Toggles the collapsible element on invocation. | ## Methods Here are some useful methods of the Collapse plugin: | Method | Description | Example | | --- | --- | --- | | **Options:** .collapse(options) | Activates content as a collapsible element. Accepts an optional options object. | $('#identifier').collapse({toggle: false}) | | **Toggle:** .collapse('toggle') | Toggles the display/hide of a collapsible element. | $('#identifier').collapse('toggle') | | **Show:** .collapse('show') | Shows a collapsible element. | $('#identifier').collapse('show') | | **Hide:** .collapse('hide') | Hides a collapsible element. | $('#identifier').collapse('hide') | ### Example The following example demonstrates the usage of the methods: ## Example $(function(){ $('#collapseFour').collapse({toggle: false})}); $(function(){ $('#collapseTwo').collapse('show')}); $(function(){ $('#collapseThree').collapse('toggle')}); $(function(){ $('#collapseOne').collapse('hide')}); [Try it »](#) The result is as follows:  ## Events The following table lists the events 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 method is called. | $('#identifier').on('show.bs.collapse', function () {// Do something...}) | | shown.bs.collapse | This event is fired when a collapsible element has been made visible to the user (will wait for CSS transitions to complete). | $('#identifier').on('shown.bs.collapse', function () {// Do something...}) | | hide.bs.collapse | This event is fired immediately when the hide instance method has been called. | $('#identifier').on('hide.bs.collapse', function () {// Do something...}) | | hidden.bs.collapse | This event is fired when a collapsible element has been hidden from the user (will wait for CSS transitions to complete). | $('#identifier').on('hidden.bs.collapse', function () {// Do something...}) | ### Example The following example demonstrates the usage of the events: ## Example $(function(){ $('#collapseexample').on('show.bs.collapse', function(){alert('Hey, this warning appears when you expand');})}); [Try it »](#) The result is as follows: