YouTip

In this tutorial, you will learn how to create collapsible components using Bootstrap. You must include both `jquery.js` and `bootstrap-collapse.js`—both JavaScript files are located in the `docs/assets/js` folder. You can create collapsible components without writing extensive JavaScript or even calling JavaScript at all. The first example demonstrates how to create a collapsible component without invoking JavaScript. ## Example (#) There are three key points to note here. First, add `data-toggle="collapse"` to the link you want users to click to expand or collapse the component. Second, add either an `href` or a `data-target` attribute to the parent element, with its value set to the ID of the child component. Third, add a `data-parent` attribute to create an accordion effect. The value of the `data-parent` attribute should match the ID of the main container div that holds the entire accordion component. If you want to create a simple collapsible component without the complexity of an accordion, you don't need to add this attribute. The second example demonstrates how to create a simple collapsible component. ## Example (#) You can use the following code to trigger the collapse via JavaScript: $(".collapse").collapse() Here are some options, methods, and events available through the Bootstrap Collapsible JavaScript plugin: ## Options **parent:** Type is Selector. Default value is false. When the parent element is shown, all collapsible elements under it are closed. **toggle:** Type is Boolean. Default value is true. When invoked, it toggles all collapsible elements. **toggle:** Type is Boolean. Default value is true. When invoked, it toggles all collapsible elements. ## Methods **.collapse(options):** Triggers the collapsible content. Accepts an optional options object. **.collapse('toggle'):** Shows or hides a collapsible page element. **.collapse('show'):** Displays a collapsible page element. **.collapse('hide'):** Hides a collapsible page element. ## Events **show:** This event is triggered immediately after the `show` instance method is called. **shown:** This event is triggered once the collapsible page element has been displayed (and any CSS transitions have completed). **hide:** This event is triggered immediately after the `hide` instance method is called. **hidden:** This event is triggered once the collapsible page element has been hidden from the user (and any CSS transitions have completed). [Click here to download all HTML, CSS, JS, and image files used in this tutorial.](#)