Direct naar hoofdinhoud

Hoofdnavigatie

Platform Beta

Collapse

Header
Body
.collapse

This is a "details" component in NS Style. This is the browser standard and thus more accessible version of Collapsible component. You can use data-controller="generic/ui/ConditionalCollapse" with data-config="{"disabledFromBreakpoints": ["m"],"enabledFromBreakpoints": ["xxl"]}" to enable or disable the collapse for a specific breakpoint(s).

Markup

<details class="collapse {{modifier_class}}" data-eventdata="{}">
    <summary class="collapse__header">Header</summary>
    <div class="collapse__body">
        Body
    </div>
</details>

Modifiers

Header
Body

.collapse--lighterColor

Collapse with a lighter color scheme

Header
Body

.collapse--right

Collapse with the controls ons the right