Direct naar hoofdinhoud

Hoofdnavigatie

Platform Beta

Collapse list

  • Header
    Body
  • Header 2
    Body
  • Header 3
    Body
.collapseList

This is a Collapse component in inside a list. This is the browser standard and thus more accessible version of Collapsible list.

Markup

<ul class="collapseList">
    <li class="collapseList__item">
        <details class="collapse collapse--lighterColor collapse--right" data-eventdata="{}">
            <summary class="collapse__header">
                Header
            </summary>
            <div class="collapse__body collapse__body--padded">
                Body
            </div>
        </details>
    </li>
    <li class="collapseList__item">
        <details class="collapse collapse--lighterColor collapse--right" data-eventdata="{}">
            <summary class="collapse__header">
                Header 2
            </summary>
            <div class="collapse__body collapse__body--padded">
                Body
            </div>
        </details>
    </li>
    <li class="collapseList__item">
        <details class="collapse collapse--lighterColor collapse--right" data-eventdata="{}">
            <summary class="collapse__header">
                Header 3
            </summary>
            <div class="collapse__body collapse__body--padded">
                Body
            </div>
        </details>
    </li>
</ul>