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.
This block of text is not collapsed by default.
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 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.