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 JS Collapse

Collapse CSS Classes

Collapse toggles the visibility of content across your project with a few classes and JavaScript plugins.

Class Description
.collapse Hides the content
.collapse.show Shows the content
.collapsing Added when the transition starts, and removed when it finishes

For a tutorial about collapse, visit our Bootstrap 4 Collapse Tutorial.


Via data-* Attributes

Just add data-toggle="collapse" and a data-target to the element to automatically assign control of one or more collapsible elements. 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’d like it to default open, add the additional class show.

Run code

To add accordion-like group management to a collapsible area, add the data attribute data-parent="#selector" :


Via JavaScript

Enable manually with:


Collapse Options

Options can be passed via data attributes or JavaScript:

For data attributes, append the option name to data-, as in data-parent="".

Name Type Default Description Example
parent selector | jQuery object | DOM element false If parent is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the card class). The attribute has to be set on the target collapsible area. Demo
toggle boolean true Toggles the collapsible element on invocation Demo

Collapse Methods

The following table lists all available collapse methods:

Method Description Example
$().collapse(options) Activates the collapsible element with an option. See options above for valid values
$().collapse("toggle") Toggles the collapsible element Demo
$().collapse("show") Shows the collapsible element Demo
$().collapse("hide") Hides the collapsible element Demo
$().collapse("dispose") Destroys the collapsible element

Collapse Events

The following table lists all available collapse events:

Event Description Example
show.bs.collapse This event fires immediately when the show instance method is called Demo
shown.bs.collapse This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete) Demo
hide.bs.collapse This event is fired immediately when the hide method has been called Demo
hidden.bs.collapse This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete) Demo