Collapse

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

Points to remember
  • 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
How to use

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".

Multiple targets

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.

Accordion example

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

Note

Accessibility

Add aria-expanded to the control element to convey the current state of the collapsible element tied to the control to screen readers. If the collapsible element is closed by default then add aria-expanded="false". If the collapsible element set to be open by default add aria-expanded="true". If the control element's HTML element is not a button (e.g., an <a> or <div>), add the attribute role="button" to the element.

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.

Usage
Via data attributes

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".

Via JavaScript

Enable manually with below javascript

$('.collapse').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
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.
toggle boolean true Toggles the collapsible element on invocation

Methods

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.

Event Type Description
show.bs.collapse This event fires immediately when the show instance method is called.
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).
hide.bs.collapse This event is fired immediately when the hide method has been called.
hidden.bs.collapse This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).

Copy

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})
Related Tutorial
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 https://twitter.com/RookieNerdTutor https://plus.google.com/b/117136517396468545840 #
Contents