Collapse

Toggle the visibility of content(show and hide content) with bootstrap plugins and classes.

• Enable collapse using data attribute or javascript.
• The collapse JavaScript plugin is used to show and hide content.
• Collapsing an element will animate the height from it's current value to 0.
• you cannot use padding on a .collapse element. Instead, use the class as an independent wrapping element.
• .collapse hides content
• .collapsing is applied during transitions. It is added when the transition starts, and removed when it finishes
• .collapse.show shows content

Create trigger element such as buttons or anchors and map to specific elements you toggle. Create a link with the href attribute, or a button with the data-target attribute. Also add the required attribute data-toggle="collapse".

Using <button> or <a> you can show and hide multiple elements by referencing them with a JQuery selector in its href or data-target attribute.

You can create an accordion by using collapse behavior and the card component.

If data-target attribute is pointing to an id selector – you should add the aria-controls attribute to the control element, containing the id of the collapsible element.

Add data-toggle="collapse" and a data-target to the element. Add the class collapse to the collapsible element. To make it open by default, add the additional class show.

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

Enable manually with below javascript

$('.collapse').collapse()

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-parent="".

Asynchronous methods and transitions

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

.collapse(options)

Activates your content as a collapsible element. Accepts an optional options object.

Copy

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')

Toggles a collapsible element to shown or hidden. Returns to the caller before the collapsible element has actually been shown or hidden (i.e. before the shown.bs.collapseor hidden.bs.collapse event occurs).

.collapse('show')

Shows a collapsible element. Returns to the caller before the collapsible element has actually been shown (i.e. before the shown.bs.collapse event occurs).

.collapse('hide')

Hides a collapsible element. Returns to the caller before the collapsible element has actually been hidden (i.e. before the hidden.bs.collapse event occurs).

.collapse('dispose')

Destroys an element's collapse.

Events

Bootstrap's collapse class exposes a few events for hooking into collapse functionality.

Copy

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})