Components

Accordion

Expandable Content with a Click.

The Accordion component enables collapsible content sections, ideal for organizing detailed information in a clean, space-saving format. Whether you’re structuring FAQs, documentation, product specs, or side menus, accordions help users find what they need, without visual clutter.

With complete theme flexibility and content-area support, you control both appearance and behavior.

Easily create interactive, elegant content structures that your users can explore at their own pace.

Structured Clarity

  1. Show only what’s needed.
    Keep your pages clean and focused.

  2. Add rich layouts inside.
    Text, images, lists, everything fits.

  3. Intuitive UX.
    Clearly show what opens and closes.

Built for Interaction

  1. Design your own open/close indicators.
    Add text, icons, or other media.

  2. Visual Indicators.
    Instant visual feedback for users.

  3. Predefined Activity State.
    Start open or closed, it's your choice.

Use Cases

Accordion components are perfect for structured, dense, or optional content. They give your visitors control over what they want to see while maintaining design simplicity and hierarchy.

Common use cases include:

  • FAQs where each question expands to reveal an answer

  • Menus with expandable sub-sections (e.g., filter panels)

  • Product specifications or comparison breakdowns

  • Tutorials with step-by-step toggles

  • Content-heavy pages where visual simplicity is essential

  • Marketing content that lets users dive deeper when interested

Accordions help create a more readable, dynamic, and responsive user experience.

Configuration Options & Features

The Accordion component is a simple but powerful tool to improve structure and usability. Offer compact content that expands on demand, with total control over look, feel, and behavior—without requiring a developer.

Your space-saving content solution—interactive, accessible, and ready to scale.

Trigger

This container defines the clickable area that toggles the accordion open and closed. Add any combination of:

  • Text (e.g., a question or title)

  • Icons (arrows, plus/minus, etc.)

  • Media (e.g., thumbnails)

This allows maximum freedom in crafting your accordion’s look and UX.

Content

This is the collapsible content area that becomes visible when the trigger is activated. It supports any nestable components, allowing for:

  • Paragraphs, lists, or media

  • Layouts with containers or rich content

  • Interactive elements like buttons or links

Use this to build robust expandable sections without cluttering the page.

Indicator

A dedicated space for an icon or image that visually reflects the accordion state. Common uses:

  • Down/Up arrows

  • Plus/Minus icons

  • Rotating chevrons

The indicator automatically rotates 180° when the accordion opens/closes.

Initial Activity State

Choose whether the accordion is expanded or collapsed on first load.

  • True: Starts open

  • False (default): Starts closed

Helpful for guiding users’ attention or setting context.

Component Theme

Controls the outer styling of the accordion block, including background, spacing, borders, etc.

Trigger Theme

Apply styles to the trigger container, including hover effects, font styles, or spacing.

Content Theme

Styles the inner expanded content area. This allows visual differentiation when the content is revealed.