Skip to main content

MCDS

Accordion

A component for creating collapsible sections with titles and content.

Throughout the Multiverse, the name Optimus Prime is associated with bravery, self-sacrifice, and an indomitable fighting spirit, a warrior always ready to lay down their life to protect sentient life, no matter its form.
Megatron is the founder of the Decepticon uprising, and their most well-known and feared leader. As a young, charismatic leader forged in battle and the heritage of war, he began to believe in a grand purpose for his race it is the Transformers' glorious destiny to rule an empire which will span the universe. The opposite of his mortal enemy Optimus Prime, he feels great contempt for other Transformers who, he feels, betray their proud heritage by demanding peace and cooperation with weaker life forms. It is the destiny of the Decepticons to bring order to the universe through conquest, though in the millions of years since coining this purpose it remains to be seen how much of his mission statement is altruistic... and how much of it is mere words built to fuel warriors to further his desire for personal power.
Bumblebee, formerly known as Volks, is one of the smallest and physically weakest Autobots. While his stature allows him to do his job better than most Autobots could manage, he is self-conscious about his size. Maybe this is why he makes fast friends among the humans. He looks up (so to speak) to the other Autobots, especially Optimus Prime, but what he doesn't realize is that they look up to him. He may be small, but he's brave, and he's one of the most well-liked Autobots around. Bumblebee already has the respect he craves. But the poor bot seems to get kidnapped a lot. Bumblebee is the Autobot's spy and scout. His talents involve espionage.

Code

<Accordion
  items={[
    {
      heading: "Optimus Prime",
      content: "Accordion content goes here...",
      open: true,
    },
    {
      heading: "Megatron",
      content: "Accordion content goes here...",
      open: false,
    },
    // ... more items
  ]}
/>

Props

Name Type Required Description
items AccordionItem[] Yes Array of accordion items to display
allowMultiple boolean No Whether multiple accordion items can be open at the same time
Default: false

AccordionItem Props

Name Type Required Description
id string No Unique identifier for the accordion item. If not provided, will be auto-generated
title string No Title text for the accordion item (preferred over heading)
heading string No Heading text for the accordion item (deprecated, use title instead)
content string Yes HTML content of the accordion item
open boolean No Whether the accordion item should be open by default

Usage

✅ Do’s

  • Use for organizing related content sections
  • Keep headers short and descriptive
  • Consider pre-expanding important sections

❌ Don’t’s

  • Don’t use for primary page navigation
  • Don’t hide critical information that users need immediately
  • Don’t nest accordions within accordions
  • Don’t use for unrelated content sections
  • Don’t overload with lengthy content

Accessibility

Keyboard Navigation

Screen Reader Support