Accordion

Overview

Accordions allow users to reveal and hide related content without leaving the current page. They are commonly used for FAQs, documentation, settings panels, and content that benefits from progressive disclosure. MiniKit styles the native <details> and <summary> elements, providing an accessible accordion experience with built-in keyboard and screen reader support.

Basic Usage

Create an accordion using the native disclosure elements.

<details data-ui="accordion">
  <summary>What is MiniKit?</summary>
  <p>MiniKit is a lightweight HTML-first CSS and JavaScript library.</p>
</details>

Multiple Items

Multiple accordion items can be grouped together to organize content into expandable sections.

<details data-ui="accordion">
  <summary>Installation</summary>
  <p>Install MiniKit using npm or a CDN.</p>
</details>
<details>
  <summary>Customization</summary>
  <p>Customize MiniKit using CSS variables.</p>
</details>
<details>
  <summary>Components</summary>
  <p>MiniKit includes a growing collection of UI components.</p>
</details>

Default Open

Use the open attribute to expand an accordion item by default.

<details data-ui="accordion" open>
  <summary>Expanded by Default</summary>
  <p>This accordion item starts opened.</p>
</details>

Accessibility

MiniKit uses the native <details> and <summary> elements, providing built-in keyboard interaction and screen reader support without any JavaScript.

• Native keyboard support (Tab, Enter, and Space).
• Automatic announcement of expanded and collapsed states by assistive technologies.
• Visible focus indicators using MiniKit's global focus styles.
• Supports multiple expanded items or single-item accordions using standard HTML.
• No custom ARIA attributes are required.

Use concise, descriptive <summary> text so users can easily understand what content each accordion contains.

API