Nebo Front-End Library

Expando

expando.js ;

Use the expando module to create expandable content areas.

Examples

Basic

Accordion (Linked Expandos)

Put expando elements in a group to implement accordion functionality, where only one expando can be open at a time.

Toggle 1

Content 1

Mobile Only Expando

It's pretty common to have content that only needs to be collapsed on mobile. Note the use of data-expando-breakpoint to set this functional breakpoint.

Desktop Only Accordion

Similar to the above, it's also pretty common to have content that functions as an accordion on desktop, but as a basic expando on mobile (where accordions usually cause obnoxious vertical jumping). Note the use of data-accordion-breakpoint.

Toggle 1

Content 1

Expand Collapse Text

Use this pattern to change the content of the expando trigger depending on the state of the expando.

Nested Expandos

Note that this functionality also works with accordions.

Toggle 1
Nested Toggle

Nested Content

Partially Visible Expando

Use this pattern to show some, but not all, of the expando content when collapsed. Note the use of the truncation-demo style module, which applies the gradient and hidden overflow.

Partially Visible Expando with Height Marker

Like the example above, except here we use a special element to create a dynamic height cutoff, instead of a fixed one.