Direct naar hoofdinhoud

Hoofdnavigatie

Platform Beta

Collapsible list (deprecated)

  • Header
    Body
  • Header
    Body
  • Header
    Body
.collapsibleList

This component is deprecated. Please use Collapse list. This is more accessible version of this component.

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

<ul class="list collapsibleList"
    data-controller="generic/ui/Collapsible"
    data-config="{&quot;selectors&quot;: {&quot;headerSelector&quot;: &quot;.collapsibleList__header&quot;}}">
    <li class="collapsibleList__item">
        <div class="collapsibleList__header">Header</div>
        <div class="collapsibleList__body">Body</div>
    </li>
    <li class="collapsibleList__item">
        <div class="collapsibleList__header">Header</div>
        <div class="collapsibleList__body">Body</div>
    </li>
    <li class="collapsibleList__item">
        <div class="collapsibleList__header">Header</div>
        <div class="collapsibleList__body">Body</div>
    </li>
</ul>