Accordion

The Accordion component is a flexible container that organizes expandable content items. It can be used to group multiple AccordionItem components and offers various style variants.

Import

To use the Accordion component, first import it into your project:

---
import { Accordion, AccordionItem } from 'free-astro-components'
---

Usage

The Accordion component consists of an Accordion container and AccordionItem children. The AccordionItem component is used to define each expandable content item within the Accordion container.

Basic Usage

Accordion 1

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem asperiores, ut, atque non inventore, fugit sed totam explicabo quisquam itaque omnis eius eveniet rem vel pariatur. Alias, expedita ratione! Animi.

Accordion 2

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem asperiores, ut, atque non inventore, fugit sed totam explicabo quisquam itaque omnis eius eveniet rem vel pariatur. Alias, expedita ratione! Animi.

Accordion 3

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem asperiores, ut, atque non inventore, fugit sed totam explicabo quisquam itaque omnis eius eveniet rem vel pariatur. Alias, expedita ratione! Animi.

---
import { Accordion, AccordionItem } from 'free-astro-components'
---

<Accordion>
  <AccordionItem title="Accordion 1">
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      Quidem asperiores, ut, atque non inventore, fugit sed
      totam explicabo quisquam itaque omnis eius eveniet rem vel
      pariatur. Alias, expedita ratione! Animi.
    </p>
  </AccordionItem>
  <AccordionItem title="Accordion 2">
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      Quidem asperiores, ut, atque non inventore, fugit sed
      totam explicabo quisquam itaque omnis eius eveniet rem vel
      pariatur. Alias, expedita ratione! Animi.
    </p>
  </AccordionItem>
  <AccordionItem title="Accordion 3">
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      Quidem asperiores, ut, atque non inventore, fugit sed
      totam explicabo quisquam itaque omnis eius eveniet rem vel
      pariatur. Alias, expedita ratione! Animi.
    </p>
  </AccordionItem>
</Accordion>

Variants

Accordion has 4 variants: light, shadow, bordered and splitted.

Light variant

Accordion 1

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem asperiores, ut, atque non inventore, fugit sed totam explicabo quisquam itaque omnis eius eveniet rem vel pariatur. Alias, expedita ratione! Animi.

Accordion 2

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem asperiores, ut, atque non inventore, fugit sed totam explicabo quisquam itaque omnis eius eveniet rem vel pariatur. Alias, expedita ratione! Animi.

Accordion 3

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem asperiores, ut, atque non inventore, fugit sed totam explicabo quisquam itaque omnis eius eveniet rem vel pariatur. Alias, expedita ratione! Animi.

---
import { Accordion, AccordionItem } from 'free-astro-components'
---

<Accordion variant='light'>
  <AccordionItem title="Accordion 1">
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      Quidem asperiores, ut, atque non inventore, fugit sed
      totam explicabo quisquam itaque omnis eius eveniet rem vel
      pariatur. Alias, expedita ratione! Animi.
    </p>
  </AccordionItem>
  <AccordionItem title="Accordion 2">
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      Quidem asperiores, ut, atque non inventore, fugit sed
      totam explicabo quisquam itaque omnis eius eveniet rem vel
      pariatur. Alias, expedita ratione! Animi.
    </p>
  </AccordionItem>
  <AccordionItem title="Accordion 3">
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      Quidem asperiores, ut, atque non inventore, fugit sed
      totam explicabo quisquam itaque omnis eius eveniet rem vel
      pariatur. Alias, expedita ratione! Animi.
    </p>
  </AccordionItem>
</Accordion>

Shadow variant

Accordion 1

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem asperiores, ut, atque non inventore, fugit sed totam explicabo quisquam itaque omnis eius eveniet rem vel pariatur. Alias, expedita ratione! Animi.

Accordion 2

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem asperiores, ut, atque non inventore, fugit sed totam explicabo quisquam itaque omnis eius eveniet rem vel pariatur. Alias, expedita ratione! Animi.

Accordion 3

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem asperiores, ut, atque non inventore, fugit sed totam explicabo quisquam itaque omnis eius eveniet rem vel pariatur. Alias, expedita ratione! Animi.

---
import { Accordion, AccordionItem } from 'free-astro-components'
---

<Accordion variant='shadow'>
  <AccordionItem title="Accordion 1">
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      Quidem asperiores, ut, atque non inventore, fugit sed
      totam explicabo quisquam itaque omnis eius eveniet rem vel
      pariatur. Alias, expedita ratione! Animi.
    </p>
  </AccordionItem>
  <AccordionItem title="Accordion 2">
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      Quidem asperiores, ut, atque non inventore, fugit sed
      totam explicabo quisquam itaque omnis eius eveniet rem vel
      pariatur. Alias, expedita ratione! Animi.
    </p>
  </AccordionItem>
  <AccordionItem title="Accordion 3">
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      Quidem asperiores, ut, atque non inventore, fugit sed
      totam explicabo quisquam itaque omnis eius eveniet rem vel
      pariatur. Alias, expedita ratione! Animi.
    </p>
  </AccordionItem>
</Accordion>

Bordered variant

Accordion 1

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem asperiores, ut, atque non inventore, fugit sed totam explicabo quisquam itaque omnis eius eveniet rem vel pariatur. Alias, expedita ratione! Animi.

Accordion 2

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem asperiores, ut, atque non inventore, fugit sed totam explicabo quisquam itaque omnis eius eveniet rem vel pariatur. Alias, expedita ratione! Animi.

Accordion 3

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem asperiores, ut, atque non inventore, fugit sed totam explicabo quisquam itaque omnis eius eveniet rem vel pariatur. Alias, expedita ratione! Animi.

---
import { Accordion, AccordionItem } from 'free-astro-components'
---

<Accordion variant='bordered'>
  <AccordionItem title="Accordion 1">
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      Quidem asperiores, ut, atque non inventore, fugit sed
      totam explicabo quisquam itaque omnis eius eveniet rem vel
      pariatur. Alias, expedita ratione! Animi.
    </p>
  </AccordionItem>
  <AccordionItem title="Accordion 2">
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      Quidem asperiores, ut, atque non inventore, fugit sed
      totam explicabo quisquam itaque omnis eius eveniet rem vel
      pariatur. Alias, expedita ratione! Animi.
    </p>
  </AccordionItem>
  <AccordionItem title="Accordion 3">
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      Quidem asperiores, ut, atque non inventore, fugit sed
      totam explicabo quisquam itaque omnis eius eveniet rem vel
      pariatur. Alias, expedita ratione! Animi.
    </p>
  </AccordionItem>
</Accordion>

Splitted variant

Accordion 1

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem asperiores, ut, atque non inventore, fugit sed totam explicabo quisquam itaque omnis eius eveniet rem vel pariatur. Alias, expedita ratione! Animi.

Accordion 2

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem asperiores, ut, atque non inventore, fugit sed totam explicabo quisquam itaque omnis eius eveniet rem vel pariatur. Alias, expedita ratione! Animi.

Accordion 3

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem asperiores, ut, atque non inventore, fugit sed totam explicabo quisquam itaque omnis eius eveniet rem vel pariatur. Alias, expedita ratione! Animi.

---
import { Accordion, AccordionItem } from 'free-astro-components'
---

<Accordion variant='splitted'>
  <AccordionItem title="Accordion 1">
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      Quidem asperiores, ut, atque non inventore, fugit sed
      totam explicabo quisquam itaque omnis eius eveniet rem vel
      pariatur. Alias, expedita ratione! Animi.
    </p>
  </AccordionItem>
  <AccordionItem title="Accordion 2">
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      Quidem asperiores, ut, atque non inventore, fugit sed
      totam explicabo quisquam itaque omnis eius eveniet rem vel
      pariatur. Alias, expedita ratione! Animi.
    </p>
  </AccordionItem>
  <AccordionItem title="Accordion 3">
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      Quidem asperiores, ut, atque non inventore, fugit sed
      totam explicabo quisquam itaque omnis eius eveniet rem vel
      pariatur. Alias, expedita ratione! Animi.
    </p>
  </AccordionItem>
</Accordion>

Default expanded

You can set the default expanded item by passing the open prop to the AccordionItem component.

Accordion 1

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem asperiores, ut, atque non inventore, fugit sed totam explicabo quisquam itaque omnis eius eveniet rem vel pariatur. Alias, expedita ratione! Animi.

Accordion 2

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem asperiores, ut, atque non inventore, fugit sed totam explicabo quisquam itaque omnis eius eveniet rem vel pariatur. Alias, expedita ratione! Animi.

Accordion 3

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem asperiores, ut, atque non inventore, fugit sed totam explicabo quisquam itaque omnis eius eveniet rem vel pariatur. Alias, expedita ratione! Animi.

---
import { Accordion, AccordionItem } from 'free-astro-components'
---

<Accordion>
  <AccordionItem title="Accordion 1">
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      Quidem asperiores, ut, atque non inventore, fugit sed
      totam explicabo quisquam itaque omnis eius eveniet rem vel
      pariatur. Alias, expedita ratione! Animi.
    </p>
  </AccordionItem>
  <AccordionItem title="Accordion 2" open>
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      Quidem asperiores, ut, atque non inventore, fugit sed
      totam explicabo quisquam itaque omnis eius eveniet rem vel
      pariatur. Alias, expedita ratione! Animi.
    </p>
  </AccordionItem>
  <AccordionItem title="Accordion 3">
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      Quidem asperiores, ut, atque non inventore, fugit sed
      totam explicabo quisquam itaque omnis eius eveniet rem vel
      pariatur. Alias, expedita ratione! Animi.
    </p>
  </AccordionItem>
</Accordion>

Interaction between AccordionItems

The name attribute in the AccordionItem component allows the items to interact with each other. For example, if multiple AccordionItem components share the same name value, opening one will automatically close the others, creating mutually exclusive behavior.

Accordion 1

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem asperiores, ut, atque non inventore, fugit sed totam explicabo quisquam itaque omnis eius eveniet rem vel pariatur. Alias, expedita ratione! Animi.

Accordion 2

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem asperiores, ut, atque non inventore, fugit sed totam explicabo quisquam itaque omnis eius eveniet rem vel pariatur. Alias, expedita ratione! Animi.

Accordion 3

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem asperiores, ut, atque non inventore, fugit sed totam explicabo quisquam itaque omnis eius eveniet rem vel pariatur. Alias, expedita ratione! Animi.

---
import { Accordion, AccordionItem } from 'free-astro-components'
---

<Accordion>
  <AccordionItem name="accordion-example" title="Accordion 1">
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      Quidem asperiores, ut, atque non inventore, fugit sed
      totam explicabo quisquam itaque omnis eius eveniet rem vel
      pariatur. Alias, expedita ratione! Animi.
    </p>
  </AccordionItem>
  <AccordionItem name="accordion-example" title="Accordion 2">
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      Quidem asperiores, ut, atque non inventore, fugit sed
      totam explicabo quisquam itaque omnis eius eveniet rem vel
      pariatur. Alias, expedita ratione! Animi.
    </p>
  </AccordionItem>
  <AccordionItem name="accordion-example" title="Accordion 3">
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      Quidem asperiores, ut, atque non inventore, fugit sed
      totam explicabo quisquam itaque omnis eius eveniet rem vel
      pariatur. Alias, expedita ratione! Animi.
    </p>
  </AccordionItem>
</Accordion>

Custom Styles

You can customize the styles of both components using CSS variables defined within the component. These variables include:

Available Variables

--ac-accordion-background-color
--ac-accordion-border-color
--ac-accordion-border-width
--ac-accordion-rounded
--ac-accordion-spacing

These styles allow you to adapt the appearance of the accordion and its items to suit your project's needs.

Props

Accordion

Attribute	Type	Description	Default
variant	`light \| shadow \| bordered \| splitted`	The visual variant of the accordion	`light`
class	`string`	CSS class for custom styling.	-
children	`AccordionItem \| AccordionItem[]`	The `AccordionItem` components contained within the accordion.	-

AccordionItem

Attribute	Type	Description	Default
title	`string`	The title displayed in the accordion header.	-
open	`boolean`	Indicates whether the accordion should be open initially.	`false`
name	`string`	Optional name to identify the accordion and allow them to interact with each other.	-
class	`string`	CSS class for custom styling.	-
children	`any`	The content displayed when the accordion is open.	-

Accessibility

Keyboard Navigation: Ensure that users can navigate the accordion using the keyboard. The summary element should be focusable, and pressing the Enter or Space key should toggle the expanded state of the AccordionItem.
Focus Management: When an accordion item is expanded, focus should be managed to ensure that the content inside the AccordionItem is accessible. Ensure that tabbing through the accordion leads to expected behavior.
Semantic HTML: The use of details and summary elements provides inherent accessibility benefits, as these elements are recognized by screen readers and provide the expected behavior.