Skip to content
Paramanu v0.1.0-alpha.0

Accordion

The Accordion allows users to expand and collapse content sections, supporting single and multiple open modes.

Basic Usage

Content for section 1.
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent, AccordionIcon } from "@paramanu/disclosure-react"


export default function App() {
return (
  <Accordion defaultValue={["item-1"]}>
    <AccordionItem value="item-1">
      <AccordionTrigger>Section 1<AccordionIcon /></AccordionTrigger>
      <AccordionContent>Content for section 1.</AccordionContent>
    </AccordionItem>
  </Accordion>
)
}
<div class="pm-accordion pm-accordion--default pm-accordion--md">
<div class="pm-accordion__item pm-accordion__item--default pm-accordion__item--open" data-state="open">
  <button class="pm-accordion__trigger pm-accordion__trigger--md pm-accordion__trigger--open" type="button" aria-expanded="true">
    Section 1
    <span class="pm-accordion__icon pm-accordion__icon--open" aria-hidden="true"></span>
  </button>
  <div class="pm-accordion__content pm-accordion__content--md pm-accordion__content--open" role="region">
    <div class="pm-accordion__content-inner">Content for section 1.</div>
  </div>
</div>
</div>