Using Accordions

Accordions hide content behind clickable titles — perfect for FAQs and long-form content. Add this to any .mdx file:

import { Accordion, Button, Callout, Carousel, Center, ImageGrid, Img, Instagram, Marquee, YouTube, SideBySide, Left, Right } from '@mdx';

<Accordion
  items={[
    { title: "When do we meet?", content: "Every Thursday at 18:00." },
    { title: "Do I need experience?", content: "No! We welcome beginners." },
    { title: "How do I join?", content: "Come to a meeting and talk to a project lead." }
  ]}
/>

Every Thursday at 18:00.

No! We welcome beginners.

Come to a meeting and talk to a project lead.

Each item needs a title and content. The content supports Markdown — use \n\n for paragraphs, **bold**, - lists, etc.

Options

`mode` — choose how items open and close

Pick a display mode instead of tweaking several flags by hand:

Mode	Behavior
`single-closed` (default)	One open at a time. All start closed.
`single-open`	One open at a time. First item starts expanded.
`always-one`	First item starts expanded and cannot be closed.
`multi`	Multiple items can be open at once.

<Accordion mode="single-open" items={[...]} />

Because mode is set to single-open.

Click to expand.

`mode="multi"` — open several at once

<Accordion mode="multi" items={[...]} />

Now open the next one too — this stays open.

Both can be expanded at the same time.

`subtitle` — categorize items

Add a subtitle field to items to show a small label:

<Accordion
  items={[
    { title: "How do I apply?", subtitle: "Membership", content: "..." },
    { title: "Where is the workshop?", subtitle: "Location", content: "..." }
  ]}
/>

Membership

Fill out the form on our contact page.

Location

Building MAR, Room 6.001 on the TU Berlin campus.

Required Fields

Field	Type	Description
`items`	array	List of sections — each needs `title` and `content`, optional `subtitle`

Optional Fields

Field	Type	Description
`mode`	enum	`"single-closed"` \| `"single-open"` \| `"always-one"` \| `"multi"` (default: `"single-closed"`)
`width`	string	Width of the accordion (default: `"100%"`)