Overview

An accordion consists of multiple sections, each section contains a heading and content. Users can click on the headings to expand or collapse a section revealing the content within.

Notable features:

• Get started with a nested object array using sane defaults
• Attributes like text, icon, image or url can be mapped to data attributes
• Default item components like Text & Link are available, with support for custom components
• Configure different components for different items based on data attributes
• Automatic closing of previous sections (optional)
• Keyboard navigation and accessibility support

Basic Example

Here's a simple example of an Accordion component with nested data. Click on sections to expand/collapse them:

Properties

The Accordion component provides several properties to customize its behavior and adapt to your data structure.

Here's the basic usage with nested data:

Field Mapping

The accordion displays content using the Text component, expecting `text` attributes and optional `icon` or `image` attributes. However, API data may not match this structure. Use the fields attribute to adapt the accordion to your data.

Since accordion is a nested structure, it expects a nested array. If your data doesn't have nested elements, consider using a List component instead.

Example of mapping custom field names:

Nested Field Mapping

The accordion supports nested field mapping for complex data structures. You can map both the outer section fields and the inner content fields:

Custom Components

You can use custom components to render accordion content. This allows for rich content display with images, links, and interactive elements.

Configure custom components using the `using` property:

Mixed Components

For advanced use cases, you can configure different components for different items based on data attributes. This enables rich, varied content within a single accordion.

Configure component selection based on data attributes: