Bootstrap tutorial

Collapse

The control elements are used to show or hide the collapsible element. Usually buttons and anchors are used as the control element.

A collapsible element usually has a collapse class, which makes the element initially hidden from the user.

The collapsible element hides from user by animating the height from its current value to 0.

<a class="btn btn-success" 
    data-bs-toggle="collapse" 
    href="#idCollapse" 
    role="button" 
    aria-expanded="false" 
    aria-controls="idCollapse">
        Live demo
 </a>
    
<div id ="idCollapse" 
        class="collapse d-block-inline">
            Here content of the <br>
            collapsible element.
</div>
Here content of the
collapsible element.

control element

Controls have special attributes listed in the table below.

attribute descripton
aria-controls Specifies list of ids of the collapsible elements separated by space:
aria-controls="idCollapse1 idCollapse2"
aria-expanded Specifies initial state of the collapsible elements:
aria-expanded="false"
role Specifies that element is used as button. Should be used for non-button elements such as anchors:
role="button"
aria-expanded Specifies initial state of the collapsible elements:
aria-expanded="false"
data-bs-target Specifies element, that will be collapse. Possible values
  • id of the collapsible element
  • .multi-collapse is used when a control trigers several collapsible elements. In this case every collapsible must have class .multi-collapse
Instead, the href attribute is used for anchors. (data-target in v4.x)
data-bs-toggle Should be a value collapse. (data-toggle in v4.x) 
<a class="btn btn-primary" 
    data-bs-toggle="collapse" 
    href="#idCollapse" 
    role="button" 
    aria-expanded="false" 
    aria-controls="idCollapse">
 Link with href
    </a>
<button class="btn btn-primary" 
    type="button" 
    data-bs-toggle="collapse" 
    data-bs-target="#idCollapse" 
    aria-expanded="false" 
    aria-controls="idCollapse">
    Button with data-target
  </button>

methods

method descripton
collapse(options) Activates your content as a collapsible element. Accepts an optional options object, that can have following properties:
  • parent - specifies parent element, possible values are selector, jQueryObject, DOM element.
  • toggle - toggles the collapsible element on invocation, boolean value.
collapse('toggle') Toggles a collapsible element to shown or hidden.
collapse('show') Shows a collapsible element.
collapse('hide') Hides a collapsible element.
collapse('dispose') Destroys an element’s collapse. 
$('#myCollapsible').collapse({
  toggle: false
});

events

event name descripton
show.bs.collapse Fires immediately when the show() method is called.
shown.bs.collapse Fires when the collapse element has been made visible to the user.
hide.bs.collapse Fires immediately when the hide() method is called.
hidden.bs.collapse Fires when a collapse element has been hidden from the user. 
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something ...
});