Home
Accordion
A vertically stacked set of expansion panels.
Usage
An accordion renders a list of expansion panels. By default, only one panel can be open at a time — expanding a new panel collapses the previous one.
Type your name, address, and contact details below.
Add your shipping address to continue with checkout.
This section is currently unavailable.
<wc-accordion>
<wc-accordion-item>
<span slot="heading">Personal information</span>
<span slot="description">Fill in your personal details</span>
<p>
Type your name, address, and contact details below.
</p>
</wc-accordion-item>
<wc-accordion-item>
<span slot="heading">Shipping address</span>
<span slot="description">Where should we send your order?</span>
<p>
Add your shipping address to continue with checkout.
</p>
</wc-accordion-item>
<wc-accordion-item disabled="true">
<span slot="heading">Billing address</span>
<p>
This section is currently unavailable.
</p>
</wc-accordion-item>
</wc-accordion>
Open by default
Use the open attribute to expand a panel by default.
This panel is expanded on load.
This panel starts collapsed.
<wc-accordion>
<wc-accordion-item open="true">
<span slot="heading">Open by default</span>
<p>This panel is expanded on load.</p>
</wc-accordion-item>
<wc-accordion-item>
<span slot="heading">Collapsed by default</span>
<p>This panel starts collapsed.</p>
</wc-accordion-item>
</wc-accordion>
Description
Use the slot="description" slot to add a short summary line below the panel title. The header grows to 64dp to accommodate both lines.
Choose your preferred delivery slot below.
Review or update your payment method.
No description — standard 48dp header height.
<wc-accordion>
<wc-accordion-item>
<span slot="heading">Shipping</span>
<span slot="description">Standard delivery, 3–5 business days</span>
<p>Choose your preferred delivery slot below.</p>
</wc-accordion-item>
<wc-accordion-item>
<span slot="heading">Payment</span>
<span slot="description">Visa ending in 4242</span>
<p>Review or update your payment method.</p>
</wc-accordion-item>
<wc-accordion-item>
<span slot="heading">Review order</span>
<p>No description — standard 48dp header height.</p>
</wc-accordion-item>
</wc-accordion>
Variants
Flat
Set variant="flat" on the accordion to remove dividers between panels. This is suitable when embedding an accordion inside a card, sheet, or other contained surface.
Content for section A. No borders between panels.
Content for section B.
Content for section C.
<wc-accordion variant="flat">
<wc-accordion-item>
<span slot="heading">Section A</span>
<p>Content for section A. No borders between panels.</p>
</wc-accordion-item>
<wc-accordion-item open="true">
<span slot="heading">Section B</span>
<p>Content for section B.</p>
</wc-accordion-item>
<wc-accordion-item>
<span slot="heading">Section C</span>
<p>Content for section C.</p>
</wc-accordion-item>
</wc-accordion>
Multiple
Add the multiple attribute to allow any number of panels to be open simultaneously.
Content for panel A. With multiple, expanding this panel does not collapse Panel B.
This panel is open by default and stays open when other panels expand.
This panel cannot be interacted with.
<wc-accordion multiple="true">
<wc-accordion-item>
<span slot="heading">Panel A</span>
<p>
Content for panel A. With <code>multiple</code>, expanding this panel does not collapse Panel B.
</p>
</wc-accordion-item>
<wc-accordion-item open="true">
<span slot="heading">Panel B</span>
<p>
This panel is open by default and stays open when other panels expand.
</p>
</wc-accordion-item>
<wc-accordion-item disabled="true">
<span slot="heading">Panel C (disabled)</span>
<p>
This panel cannot be interacted with.
</p>
</wc-accordion-item>
</wc-accordion>
Toggle icon
By default the toggle icon appears at the trailing end of the header. Add leading-toggle to <wc-accordion> to move it to the leading start.
Trailing (default)
The expand icon sits at the trailing end of the header row.
Content for panel B.
<wc-accordion>
<wc-accordion-item open="true">
<span slot="heading">Panel A</span>
<p>The expand icon sits at the trailing end of the header row.</p>
</wc-accordion-item>
<wc-accordion-item>
<span slot="heading">Panel B</span>
<p>Content for panel B.</p>
</wc-accordion-item>
</wc-accordion>
Leading
The expand icon sits at the leading start of the header row.
Content for panel B.
<wc-accordion leading-toggle="true">
<wc-accordion-item open="true">
<span slot="heading">Panel A</span>
<p>The expand icon sits at the leading start of the header row.</p>
</wc-accordion-item>
<wc-accordion-item>
<span slot="heading">Panel B</span>
<p>Content for panel B.</p>
</wc-accordion-item>
</wc-accordion>
Hidden
Set hide-toggle on <wc-accordion-item> to remove the indicator entirely. Useful when the expand interaction is implied by context.
Click the header to toggle — no icon is shown.
Useful inside navigation or filter lists.
<wc-accordion>
<wc-accordion-item hide-toggle="true">
<span slot="heading">No indicator</span>
<p>Click the header to toggle — no icon is shown.</p>
</wc-accordion-item>
<wc-accordion-item hide-toggle="true">
<span slot="heading">Another panel</span>
<p>Useful inside navigation or filter lists.</p>
</wc-accordion-item>
</wc-accordion>