TRA SummitDesign System

Accordion

Vertically stacked disclosure panels for progressively revealing content.

Single, collapsible

<Accordion type="single" collapsible className="w-full">
  <AccordionItem value="dues">
    <AccordionTrigger>When are membership dues drafted?</AccordionTrigger>
    <AccordionContent>
      Autopay drafts on the 1st of each month.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="methods">
    <AccordionTrigger>Which payment methods are accepted?</AccordionTrigger>
    <AccordionContent>
      Credit and debit cards, bank accounts (ACH), and mailed checks.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Multiple open

Visa ending 4242, billing zip 1755. Next charge: $189.00 on July 1.

<Accordion type="multiple" defaultValue={['billing']} className="w-full">
  <AccordionItem value="billing">
    <AccordionTrigger>Billing details</AccordionTrigger>
    <AccordionContent>
      Visa ending 4242, billing zip 1755. Next charge: $189.00 on July 1.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="history">
    <AccordionTrigger>Payment history</AccordionTrigger>
    <AccordionContent>
      12 payments posted in the last 12 months, all on time.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Disabled item

<Accordion type="single" collapsible className="w-full">
  <AccordionItem value="statements">
    <AccordionTrigger>Statements</AccordionTrigger>
    <AccordionContent>Download monthly statements as PDF.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="tax" disabled>
    <AccordionTrigger>Tax documents (available in January)</AccordionTrigger>
    <AccordionContent>Year-end tax documents are published each January.</AccordionContent>
  </AccordionItem>
</Accordion>