Accordion
A pretty helpful component to show organized information to the user.
Default
Click the accordions below to expand/collapse the accordion content.
This is the first item's accordion
body.
It is shown by default, until the collapse plugin
adds the appropriate classes that we use to style
each element. These classes control the overall
appearance, as well as the showing and hiding via
CSS transitions. You can modify any of this with
custom CSS or overriding our default variables.
It's also worth noting that just about any HTML
can go within the
hs-basic-heading-1, though the transition does limit overflow.
Flush
Add
hs-accordion
to remove the default background-color, some borders, and
some rounded corners to render accordions edge-to-edge with
their parent container.