Accordion

This component is a user interface element that allows users to expand and collapse sections of content.

Usage

Accordions can be used in a variety of scenarios, such as FAQs, product details, or any context where you want to provide users with the ability to reveal more information as needed without overwhelming them with too much content at once. By clicking on a section header, users can expand or collapse the corresponding content area, enabling a streamlined and interactive user experience.

Customization Options

Opened Sections

The Accordion component supports two modes for managing opened sections:

1. Open Single at a Time: This mode ensures that only one section can be open at a time. When a new section is opened, the previously opened section will automatically close.

2. Multiple Sections: In this mode, multiple sections can be open simultaneously. Users can expand or collapse sections independently without affecting the state of other sections.

Expand/Collapse Icon Position

You can also customize the position of the expand/collapse icons for each section header. The available positions are:

1. None: No icon will be displayed.

2. Left: The icon will be displayed on the left side of the section header.

3. Right: The icon will be displayed on the right side of the section header.