---json
{
    "description": "The accordion component is a widget that layouts it children component in an accordion fashion. This article shows you how to do it.",
    "page_id": "ur9bo8pa19x06lve2n5pa",
    "title": "How to create a accordion layout ?"
}
---

====== ComboStrap UI - Accordion ======


===== About =====
''accordion'' is a [[docs:component|UI component]] that [[docs:layout:component:component|lays out]] [[docs:layout:component:panel|panels]] in an accordion fashion that [[:docs:animation:toggle|toggle (collapse or expand)]] when clicked.


<note tip>
You can also choose [[docs:layout:component:tabs|tabs]] as other navigational collapsible layout for panels.
</note>


===== Example =====

By default, [[docs:menubar:collapse|panels]] are ''collpased'', if you don't want, you need to set it explicitly to ''false''.

<webcode name="Default">
<code dw>
<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>
</code>
</webcode>