Accordion

Interactive component for showing and hiding content panels.

What is included in the free plan?

The free plan gives you access to basic features including project creation, limited storage, and community support. You can upgrade at any time for more functionality.

Can I use this tool with my existing workflow?

Absolutely. The system is designed to integrate seamlessly with popular tools like Git, Markdown, and static site generators. No major setup or migration required.

How does team collaboration work?

You can invite team members to your projects, assign roles, and collaborate in real time. Changes are tracked and synced automatically across environments.

---
import Text from "@core-elements/text/Text.astro";
import Accordion from "@wrappers/accordion/Accordion.astro";
import AccordionItem from "@wrappers/accordion/AccordionItem.astro";
---

<Accordion label="">
  <AccordionItem title="What is included in the free plan?">
    <Text>
      <p>The free plan gives you access to basic features including project creation, limited storage, and community support. You can upgrade at any time for more functionality.</p>
    </Text>
  </AccordionItem>
  <AccordionItem title="Can I use this tool with my existing workflow?">
    <Text>
      <p>Absolutely. The system is designed to integrate seamlessly with popular tools like Git, Markdown, and static site generators. No major setup or migration required.</p>
    </Text>
  </AccordionItem>
  <AccordionItem title="How does team collaboration work?">
    <Text>
      <p>You can invite team members to your projects, assign roles, and collaborate in real time. Changes are tracked and synced automatically across environments.</p>
    </Text>
  </AccordionItem>
</Accordion>

---
blocks:
  _component: building-blocks/wrappers/accordion
  items:
    - title: What is included in the free plan?
      contentSections:
        - _component: building-blocks/core-elements/text
          text: The free plan gives you access to basic features including project creation, limited storage, and community support. You can upgrade at any time for more functionality.
    - title: Can I use this tool with my existing workflow?
      contentSections:
        - _component: building-blocks/core-elements/text
          text: Absolutely. The system is designed to integrate seamlessly with popular tools like Git, Markdown, and static site generators. No major setup or migration required.
    - title: How does team collaboration work?
      contentSections:
        - _component: building-blocks/core-elements/text
          text: You can invite team members to your projects, assign roles, and collaborate in real time. Changes are tracked and synced automatically across environments.
  label: ''
  openFirst: false
  singleOpen: false
---

Overview

Organizes content into expandable panels that users can open or close. Supports single or multiple open panels, and the ability to open the first panel when initalized. Renders using <details> and <summary> elements for accessibility.`.

Properties

label string

Optional label for the accordion to help identify it in the editor.

items array | default: array

The items to display in the accordion.

Item Properties:

title string | default: My Title

The title of the accordion item.

contentSections array | default: array

openFirst boolean | default: false

Whether the first item will be open by default.

singleOpen boolean | default: false

Whether only one item can be open at a time within this accordion.

Slots

default

The contents for the the Accordion. Used only when the items property is not set.

Child Component:

<AccordionItem>

Properties (documented under the items property above):

contentSections/slot
title

Examples

Open First Item

What do I get?

You get access to basic features to help you get started quickly.

Is it easy to use?

Yes, everything is designed to be simple and straightforward.

Can I use it with others?

You can share and collaborate with others at any time.

---
import Text from "@core-elements/text/Text.astro";
import Accordion from "@wrappers/accordion/Accordion.astro";
import AccordionItem from "@wrappers/accordion/AccordionItem.astro";
---

<Accordion openFirst>
  <AccordionItem title="What do I get?">
    <Text>
      <p>You get access to basic features to help you get started quickly.</p>
    </Text>
  </AccordionItem>
  <AccordionItem title="Is it easy to use?">
    <Text>
      <p>Yes, everything is designed to be simple and straightforward.</p>
    </Text>
  </AccordionItem>
  <AccordionItem title="Can I use it with others?">
    <Text>
      <p>You can share and collaborate with others at any time.</p>
    </Text>
  </AccordionItem>
</Accordion>

---
blocks:
  _component: building-blocks/wrappers/accordion
  openFirst: true
  items:
    - title: What do I get?
      contentSections:
        - _component: building-blocks/core-elements/text
          text: You get access to basic features to help you get started quickly.
    - title: Is it easy to use?
      contentSections:
        - _component: building-blocks/core-elements/text
          text: Yes, everything is designed to be simple and straightforward.
    - title: Can I use it with others?
      contentSections:
        - _component: building-blocks/core-elements/text
          text: You can share and collaborate with others at any time.
---

Single Open