Home
Accordion
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 class="text-body-large">
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 class="text-body-large">
Add your shipping address to continue with checkout.
</p>
</wc-accordion-item>
<wc-accordion-item disabled="true">
<span slot="heading">Billing address</span>
<p class="text-body-large">
This section is currently unavailable.
</p>
</wc-accordion-item>
</wc-accordion>
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 class="text-body-large">This panel is expanded on load.</p>
</wc-accordion-item>
<wc-accordion-item>
<span slot="heading">Collapsed by default</span>
<p class="text-body-large">This panel starts collapsed.</p>
</wc-accordion-item>
</wc-accordion>
Description
Set the description attribute 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 class="text-body-large">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 class="text-body-large">Review or update your payment method.</p>
</wc-accordion-item>
<wc-accordion-item>
<span slot="heading">Review order</span>
<p class="text-body-large">No description — standard 48dp header height.</p>
</wc-accordion-item>
</wc-accordion>
Multiple
Add the multi attribute to allow any number of panels to be open simultaneously.
Content for panel A. With multi, 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 multi="true">
<wc-accordion-item>
<span slot="heading">Panel A</span>
<p class="text-body-large">
Content for panel A. With <code class="text-code-block">multi</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 class="text-body-large">
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 class="text-body-large">
This panel cannot be interacted with.
</p>
</wc-accordion-item>
</wc-accordion>
Toggle
By default the toggle icon appears at the trailing end of the header (toggle-position="after", matching M3). Set toggle-position="before" to move the icon to the leading start.
The expand icon sits at the end of the header row.
The expand icon sits at the start of the header row.
<wc-accordion>
<wc-accordion-item toggle-position="after">
<span slot="heading">Trailing icon (default)</span>
<p class="text-body-large">The expand icon sits at the end of the header row.</p>
</wc-accordion-item>
<wc-accordion-item toggle-position="before">
<span slot="heading">Leading icon</span>
<p class="text-body-large">The expand icon sits at the start of the header row.</p>
</wc-accordion-item>
</wc-accordion>
Set hide-toggle to remove the indicator entirely. This is 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 class="text-body-large">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 class="text-body-large">Useful inside navigation or filter lists.</p>
</wc-accordion-item>
</wc-accordion>
Display Mode
Set display-mode="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 display-mode="flat">
<wc-accordion-item>
<span slot="heading">Section A</span>
<p class="text-body-large">Content for section A. No borders between panels.</p>
</wc-accordion-item>
<wc-accordion-item open="true">
<span slot="heading">Section B</span>
<p class="text-body-large">Content for section B.</p>
</wc-accordion-item>
<wc-accordion-item>
<span slot="heading">Section C</span>
<p class="text-body-large">Content for section C.</p>
</wc-accordion-item>
</wc-accordion>
On this page
Accordion
Usage Description Multiple Toggle Display Mode