Expando
Use the expando
module to create expandable content areas.
Examples
Basic
Toggle
Content
Content
Accordion (Linked Expandos)
Put expando
elements in a group to implement accordion functionality, where only one expando can be open at a time.
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.
Content
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
.
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.
Nested Content
Nested Content
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.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
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.
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.