Bootstrap 4 Tutorial
BS4 Introduction BS4 Getting Started BS4 Containers BS4 Typography BS4 Grid Basics BS4 Tables BS4 Images BS4 Jumbotron BS4 Buttons BS4 Button Groups BS4 Spinners BS4 Alerts BS4 Dropdowns BS4 Collapse BS4 Navs BS4 Navbars BS4 Pagination BS4 Breadcrumbs BS4 Badges BS4 Progress Bars BS4 List Groups BS4 Cards BS4 Forms BS4 Inputs BS4 Input Groups BS4 Custom Forms BS4 Carousel BS4 Modal BS4 Tooltips BS4 Popovers BS4 Toast BS4 Scrollspy BS4 Media Objects BS4 Filters BS4 Utilities Bootstrap 3 vs. Bootstrap 4
Bootstrap 4 Grid
BS4 Grid System BS4 Grid XSmall BS4 Grid Small BS4 Grid Medium BS4 Grid Large BS4 Grid XLarge
Bootstrap 4 Reference
JS Alert JS Carousel JS Collapse JS Dropdown JS Modal JS Popover JS Tab JS Toasts JS Tooltip

Bootstrap 4 Collapse

A collapsible element is used to hide or show a large amount of content.


Basic Collapsible

Click the button below to show and hide another element:

The collapse component toggles the visibility of content across your project.

Buttons or anchors are used as triggers that are mapped to specific elements you toggle.

Collapsing an element will animate the height from its current value to 0.

Run code

Example explained:

The .collapse class indicates a collapsible element i.e. the content that will be shown or hidden with a click of a button.

To control (show/hide) the collapsible content, add data-toggle="collapse" attribute to a button element.

Then add data-target="#id" attribute to connect the button with the collapsible content (<div id="demo">).

Note: For <a> elements, you can use the href attribute instead of the data-target attribute:

Link with href

The collapse component toggles the visibility of content across your project.

Buttons or anchors are used as triggers that are mapped to specific elements you toggle.

Collapsing an element will animate the height from its current value to 0.

Run code

By default, the collapsible content is hidden. However, you can add the .show class to show the content by default:

Run code

Multiple Targets

A button or anchor tag can show or hide multiple elements by referencing them with a jQuery selector in its href or data-target attribute. Multiple button or anchor tag can show and hide an element if they can reference it with their href or data-target attribute.

Toggle first element

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda deleniti dolorem quos rem repellendus. Atque cum deleniti dicta, harum iusto quidem repellendus. Accusamus accusantium cum cumque doloribus iusto minima quos.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda deleniti dolorem quos rem repellendus. Atque cum deleniti dicta, harum iusto quidem repellendus. Accusamus accusantium cum cumque doloribus iusto minima quos.
Run code

Accordion Example

Using the card component, you can extend the default collapse behavior to create an accordion.

To properly achieve the accordion style, be sure to use .accordion as a wrapper.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. At commodi consequatur dicta distinctio doloremque eaque exercitationem fugiat hic necessitatibus nesciunt odit optio perferendis, quisquam reprehenderit sint tenetur ut veniam voluptates?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. At commodi consequatur dicta distinctio doloremque eaque exercitationem fugiat hic necessitatibus nesciunt odit optio perferendis, quisquam reprehenderit sint tenetur ut veniam voluptates?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. At commodi consequatur dicta distinctio doloremque eaque exercitationem fugiat hic necessitatibus nesciunt odit optio perferendis, quisquam reprehenderit sint tenetur ut veniam voluptates?

Note: Use the data-parent attribute to make sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.

Run code

Complete Bootstrap 4 Collapse Reference

For a complete reference of all collapse options, methods and events, visit our Bootstrap 4 JS Collapse Reference.