Accordion

Accordions can be used to toggle the visibility of content. The content of the accordion can be any type of content, such as text, images, or other components.

Component

Basic Usage

Section 1

This is the content of section 1

Section 2

This is the content of section 2

Section 3

This is the content of section 3

---
import { Accordion, AccordionItem } from "@gemini-ui-astro/components";
import { DynamicGlow } from "@gemini-ui-astro/components";
---

<Accordion dynamicGlow style={{ minWidth: "400px" }}>
  <AccordionItem title="Section 1" id="section-1">
    <p>This is the content of section 1</p>
  </AccordionItem>
  <AccordionItem title="Section 2" id="section-2">
    <p>This is the content of section 2</p>
  </AccordionItem>
  <AccordionItem title="Section 3" id="section-3">
    <p>This is the content of section 3</p>
  </AccordionItem>
</Accordion>

Props

The Accordion component has the following props.

Name	Type	Default	Description
dynamicGlow	boolean	false	A Gemini UI unique effect
class	string	-	Override or extend the styles applied to the component.

The AccordionItem component has the following props.

Name	Type	Default	Description
title	string	”	The content displayed in the accordion button
children	html / string / img	-	The content within the accordion item