Skip to main content

Accordion and AccordionGroup

The Accordion component creates collapsible sections of content that can be toggled open/closed. AccordionGroup allows grouping multiple accordions together.

Props​

Accordion Props​

  • title (required): The main text displayed in the header
  • description (optional): Secondary text shown below the title
  • defaultOpen (optional): Whether the accordion is initially expanded (default: false)
  • icon (optional): React node to display as an icon on the left
  • onChange (optional): Callback function triggered when accordion state changes
  • children (required): Content to show when accordion is expanded

AccordionGroup Props​

  • children (required): Collection of Accordion components to group together

Example​

A charm used to make objects fly. It's Wing-gar-dium Levi-o-sa!

  #include <iostream>
  int main() {
      levioso();
  }

The Patronus Charm is one of the most powerful defensive charms known to wizardkind. The spell conjures a magical guardian, a projection of all your most positive feelings.

A complicated potion that allows the drinker to assume the appearance of another person. Brewing time: 1 month. Key ingredients include lacewing flies, leeches, fluxweed, and a piece of the person you want to turn into.

Also known as 'Liquid Luck', this golden potion makes the drinker lucky for a period of time. Extremely tricky to make, disastrous if brewed wrong, and banned in all organized competitions.

The most powerful truth serum in existence. Three drops will have the drinker spilling their deepest secrets. Use with extreme caution - Ministry regulated substance.

Usage​

import { Accordion, AccordionGroup } from "@site/src/components/Extras/Accordion"

<Accordion 
  title="Wingardium Leviosa"
  description="Basic levitation spell"
  defaultOpen={false}
  icon={<FaFly/>}
  onChange={(isOpen) => console.log('Accordion state:', isOpen)}
>
  A charm used to make objects fly. Remember Hermione's advice - it's Wing-gar-dium Levi-o-sa, not Levio-sar!
</Accordion>

<AccordionGroup>
  <Accordion title="Polyjuice Potion" description="Complex transformation brew">
    A complicated potion that allows the drinker to assume the appearance of another person.
  </Accordion>

  <Accordion title="Felix Felicis">
    Also known as 'Liquid Luck', this golden potion makes the drinker lucky for a period of time.
  </Accordion>
</AccordionGroup>