Accordion

An accordion component. Used to create small pockets of additional information.

Usage

'Read the “', Usage, '” section'

Preview

This is the summary

These are the details

This is the 2nd summary

These are the 2nd details

Code

AccordionExample.astro

---
import { Accordion, AccordionItem } from 'studiocms:ui/components';
---

<Accordion>
  <AccordionItem open>
    <div slot="summary">This is the summary</div>
    <div>These are the details</div>
  </AccordionItem>
  <AccordionItem>
    <div slot="summary">This is the 2nd summary</div>
    <div>These are the 2nd details</div>
  </AccordionItem>
</Accordion>

Opening an item by default

'Read the “', Opening an item by default, '” section'

You can pass the open prop to any <AccordionItem> to have it be open by default, as seen above in the example.

Styles

'Read the “', Styles, '” section'

The accordion component has multiple different styles:

• outlined (Default)
• separated
• filled
• blank

They can be used via the style prop on the accordion parent. Here’s an accordion with the filled style:

Preview

This is the summary

These are the details

This is the 2nd summary

These are the 2nd details

Code

AccordionStyleExample.astro

---
import { Accordion, AccordionItem } from 'studiocms:ui/components';
---

<Accordion style="filled">
  <AccordionItem open>
    <div slot="summary">This is the summary</div>
    <div>These are the details</div>
  </AccordionItem>
  <AccordionItem>
    <div slot="summary">This is the 2nd summary</div>
    <div>These are the 2nd details</div>
  </AccordionItem>
</Accordion>

Multiple Open Items

'Read the “', Multiple Open Items, '” section'

By default, users can open multiple items in the accordion at once. You can change this behavior by setting the multipleOpen prop on the <Accordion> element to false:

Preview

This is the summary

These are the details

This is the 2nd summary

These are the 2nd details

Code

AccordionStyleExample.astro

---
import { Accordion, AccordionItem } from 'studiocms:ui/components';
---

<Accordion multipleOpen={false}>
  <AccordionItem open>
    <div slot="summary">This is the summary</div>
    <div>These are the details</div>
  </AccordionItem>
  <AccordionItem>
    <div slot="summary">This is the 2nd summary</div>
    <div>These are the 2nd details</div>
  </AccordionItem>
</Accordion>