Collapsible Content

The collapsible component allows blocks of content on a page which collapse under the first element in the block.

To make a block of content collapsed, simply add the data-collapsible attribute to the block element. If you want the block collapsed by default when the page loads, add the data-collapsed attribute.


This block of text is collapsed by default.

Not collapsed

This block of text is not collapsed by default.

Collapsed Again

This block of text is collapsed by default.

The collapsible content will all collapse under the first-child element within the collapsible block. You should make sure the first-child element is a display: block element to ensure that content doesn't jump around when the parent block is collapsed or uncollapsed.

For styling purposes, you may also desire for the first element to be only one line tall. You may use the truncate component on the first-child element to achieve this effect.

This is a really long first element that takes up multiple lines on small screens

This block of text is collapsed by default.


Normally, we'd attach the styles for a component to a class and the JavaScript to a data- attribute. However, the collapsible component doesn't work without JavaScript, so we've attached both the styling and the functionality to the data-collapsible attribute. This way, it degrades gracefully to a standard content block when JS is disabled.