Collapsible Tile
Title
Content
.collapsibleTile
An element that contains a clickable header and a body element that is toggled visible/invisible upon clicking
For Javascript functionality, this element requires data-controller="generic/ui/Collapsible"
to be set on the parent container.
This will cause the first child component to become the header and the second to become the body element.
Markup
<div class="collapsibleTile" data-controller="generic/ui/Collapsible" data-config="{"selectors": {"headerSelector": ".collapsibleTile__title"}}">
<div class="collapsibleTile__title">Title</div>
<div class="collapsibleTile__body">
<div class="collapsibleTile__content">Content</div>
</div>
</div>