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 _component="building-blocks/wrappers/accordion/accordion-item" 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 _component="building-blocks/wrappers/accordion/accordion-item" 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 _component="building-blocks/wrappers/accordion/accordion-item" 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:
    - _component: building-blocks/wrappers/accordion/accordion-item
      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.
    - _component: building-blocks/wrappers/accordion/accordion-item
      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.
    - _component: building-blocks/wrappers/accordion/accordion-item
      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:

_component string | default: building-blocks/wrappers/accordion/accordion-item

title string

The title of the accordion item.

contentSections 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 _component="building-blocks/wrappers/accordion/accordion-item" title="What do I get?">
    <Text>
      <p>You get access to basic features to help you get started quickly.</p>
    </Text>
  </AccordionItem>
  <AccordionItem _component="building-blocks/wrappers/accordion/accordion-item" title="Is it easy to use?">
    <Text>
      <p>Yes, everything is designed to be simple and straightforward.</p>
    </Text>
  </AccordionItem>
  <AccordionItem _component="building-blocks/wrappers/accordion/accordion-item" 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:
    - _component: building-blocks/wrappers/accordion/accordion-item
      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.
    - _component: building-blocks/wrappers/accordion/accordion-item
      title: Is it easy to use?
      contentSections:
        - _component: building-blocks/core-elements/text
          text: Yes, everything is designed to be simple and straightforward.
    - _component: building-blocks/wrappers/accordion/accordion-item
      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