> ## Documentation Index
> Fetch the complete documentation index at: https://docs.xquiz.com.br/llms.txt
> Use this file to discover all available pages before exploring further.

# Accordion

> Expandable element to organize content in collapsible sections

<img style={{ borderRadius: "0.5rem" }} src="https://mintcdn.com/xquiz-12076fbf/DabTafNhExNz5i1G/images/accordion-v3.png?fit=max&auto=format&n=DabTafNhExNz5i1G&q=85&s=cf0ac22276841da26b023317a2bd3b99" width="1014" height="635" data-path="images/accordion-v3.png" />

The Accordion element serves to organize information in expandable and collapsible sections, allowing users to see only the content they want, keeping the interface clean and organized.

**What it's for**

* Organize information in collapsible sections to save space.

* Create interactive FAQs (Frequently Asked Questions).

* Present detailed content in an organized and accessible way.

* Improve user experience with intuitive navigation.

* Reduce visual overload while keeping important information accessible.

**What you can configure**

**Opening Mode:**

* **Single:** Only one item can be open at a time (default behavior).

* **Multiple:** Several items can be open simultaneously.

**Item Content:**

* **Title:** Main text of each section with rich formatting (bold, italic, colors, etc.).

* **Description:** Detailed content of each section with full text editor.

* **Variables:** Insert dynamic variables in both title and description.

**Content Settings:**

* **Minimum:** 1 required item.

* **Maximum:** 10 items per accordion.

* **Formatting:** Full editor with toolbar for advanced formatting.

**Visual Styles:**

* **Border:** Color of separator lines between items.

* **Title:** Custom color for the title text of each item.

* **Description:** Custom color for the description content.

* **Icon:** Color of the expand/collapse icon.

**Animations:**

* **Transition:** Smooth animation when opening and closing items.

* **Icon:** Icon rotation indicating the state (open/closed).

**Interactivity:**

* **Hover:** Underline effect when hovering over the title.

* **Click:** Expand/collapse content when clicking on the title.

**Usage tip!**

Use accordions to organize complex information in a clear and accessible way. Keep titles concise and descriptive, and organize content logically. Avoid creating too many items (maximum 5-7) to avoid overwhelming the user. Use "Single" mode for FAQs and "Multiple" mode when users need to compare information between different sections.