How to create a accordion layout ?

About

accordion is a UI component that lays out panels in an accordion fashion that toggle (collapse or expand) when clicked.

You can also choose tabs as other navigational collapsible layout for panels.

Example

By default, panels are collpased, if you don't want, you need to set it explicitly to false.

<accordion>
    <panel collapsed="false">
        <label>Collapsible Group Item #1</label>
        Some placeholder content for the first accordion card. This card is shown by default because of the ''collapsed'' attribute.
    </panel>
    <panel>
        <label><icon name="hamburger"/> Menu</label>
        === With Hamburger Icon ===
        You can use all syntaxes inside a label [[:docs:content:icon|icon included]]
    </panel>
</accordion>

Some placeholder content for the first accordion card. This card is shown by default because of the collapsed attribute.

With Hamburger Icon

You can use all syntaxes inside a label icon included