JS Expando

Overview

JS Expando is used for creating collapseable content areas.

Each expando element contains at least one toggle and some content. Clicking on the toggle toggles the content, collapsing or expanding it.

Notes

  • Expanded JS Expando elements are given the class is-selected to support styling
  • Expando content is toggled using jQuery's slideUp and slideDown animations.
  • Multiple JS Expando elements can be linked together to create an "accordion", where only one expando in a group can be open at a time (see examples)
  • JS Expando elements can be nested within one another (see examples)

Options

data-expando-accordion-breakpoint

A String representing the media query that, when matched, will disable the element's accordion functionality. When disabled, toggling this expando will have no affect on other expandos.

data-expando-breakpoint

A String representing the media query that, when matched, will disable the element's expando functionality (showing the content and disabling the toggle).

data-expando-duration

A number representing how many milliseconds the collapsing/expanding animation should take. Default is 400.

data-expando-height

A number representing the pixel height of the expando content to be shown before expansion. Default is 0.

Examples

Basic

Accordion

Toggle 1

Content 1

Mobile Only Expando

Desktop Only Accordion

Toggle 1

Content 1

Expand/Collapse Text

Nested Expandos

Toggle 1
Nested Toggle

Nested Content

Partially Visible Expando

Partially Visible Expando with Height Marker

Adding an element with the class js-expando__height-marker anywhere inside the expando content will force the expando height to be dynamically calculated based on the offset of this element from the top of the expando content. This allows for a dynamic value for expando height, rather than a fixed one.