Writing contentComponents

Accordion Groups

Accordion Groups allow you to organize content into collapsible sections, making it easier for users to navigate through information. With recent updates, our Accordion component now supports improved search functionality using the browser’s built-in search feature.

Accordion Groups can contain multiple Accordion items. Each Accordion has a title and content that can be expanded or collapsed. You can use the defaultOpen prop to expand specific accordions by default when the page loads.

1<AccordionGroup>
2  <Accordion title="Section 1" defaultOpen={true}>
3    Content for section 1, expanded by default
4  </Accordion>
5  <Accordion title="Section 2">
6    Content for section 2
7  </Accordion>
8</AccordionGroup>

Accordion components use HTML5 <details> and <summary> elements, enabling browser search (Cmd+F / Ctrl+F) so users can find content within collapsed sections.

The Accordion component supports keyboard navigation and screen readers.

Usage examples

Simple text content

This is a basic example with text content. It’s open by default when the page loads.

You can embed images, videos, and other media within accordions for rich interactive content.

A sample image
Sample image

Accordions can contain other components, such as code blocks and callouts.

1export function greet(name: string) {
2  return `Hello, ${name}!`;
3}

Here’s a nested callout.