Collapse

The collapse widget allows to collapse/expand (hide/show) portions of information when the user clicks on its trigger.

Collapse overview

The collapse widget structure

  • trigger: the collapse trigger, specified as:
    • element with data-widget="collapse"
  • panel: the panel that will be collapsed/expanded, specified as one of:
    • the aria-controls attribute with a space-separated list of element ids to toggle
    • using data-target option, specified as a jQuery selector relative to the widget, or its parent
    • using href attribute, specified as an id reference starting with #
    • the second child element of the toggle
    • the element that follows the toggle

Options for the collapse widget

  • data-event: what event to respond to (click by default)
  • data-overlay: whether to show the panel as an overlay
  • aria-expanded: whether to expand the panel by default (true or false, false by default)

Events for the collapse widget

  • beforeToggle: triggered on the trigger and the panel elements before the toggle happens
  • afterToggle: triggered on the trigger and the panel elements after the toggle happens

Both events have the following parameters:

  • toggle: a reference to the trigger element
  • targets: a reference to the panel elements
  • status: a boolean indicating whether the targets are visible (true) or hidden (false)
  • event: the actual event that triggered the toggle

Default collapse

Only label will toggle

Toggle

Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante.


  <span data-widget="collapse"><!-- toggle label --></span>
  <div><!-- panel content --></div>

Collapse with custom targets

Collapse the content

Click anywhere inside element to toggle

Toggle

Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante.


  <div data-widget="collapse">
    <span><!-- toggle label --></span>
    <div><!-- panel content --></div>
  </div>
Toggle

will not be toggled

Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante.


  <a href="#myId" data-widget="collapse"><!-- toggle label --></span>
  <div id="myId"><!-- panel content --></div>

Collapse targets specified in the target option

Toggle

will not be toggled

Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante.

will not be toggled

Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio.

Toggle

will not be toggled

Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante.

will not be toggled

Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio.


  <span data-widget="collapse" data-target=".myClass"><!-- toggle label --></span>
  <div class="myClass"><!-- panel content --></div>

Collapse targets specified in the controls option

Toggle

Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante.

will not be toggled

Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio.


  <span data-widget="collapse" aria-controls="myId"><!-- toggle label --></span>
  <div id="myId"><!-- panel content --></div>

Collapse with overlay

It is also possible to have the toggled panel displayed as an overlay by adding the data-overlay="true" attribute:

Toggle

Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante.


  <span data-widget="collapse" data-overlay="true"><!-- toggle label --></span>
  <div><!-- panel content --></div>

Collapse on mouseenter/mouseleave

It is also possible to have the collapse reacting on other events, like mouseeneter mouseleave for instance:

Toggle

Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante.


  <div data-widget="collapse" data-event="mouseenter mouseleave">
    <span><!-- toggle label --></span>
    <p><!-- panel content --></p>
  </div>