# Accordion

## Setting Up Your Accordion

### 1. Add Sections to Your Accordion

First, you'll create the individual sections, or "items," for your accordion. Each item acts as a collapsible container where you'll place the content you want to display. This makes the Accordion component so powerful: you're not limited to just text and images. You can drag and drop any other Avonni Dynamic Component directly into an accordion section.

Do you want to include a detailed table of data? Drag a Data Table component right into the section. Need to visualize locations? Add a Map component. The possibilities are endless!

To add a new section, click the "Add Item" button.

{% @arcade/embed flowId="7ZnMSlKAQfGsS7pOFTwZ" url="<https://app.arcade.software/share/7ZnMSlKAQfGsS7pOFTwZ>" %}

### **2:** Customize the Look and Feel of Each Section

**Give your items the right look and feel.**

* **Variant:** Choose between "Base" for a standard appearance or "Shaded" for a subtle background effect.
* **Collapsible Icons:** Enable or disable the icons that indicate whether a section is expanded or collapsed.
* **Icon Position:** Place the collapsible icons on the left or right side of the item header.

### **3:** Choose Initially Open Section(s) (Optional)

This step lets you control which accordion section (or sections) are expanded when the component first loads.

* **One Section Open at a Time:** If your accordion is set to allow only one open section at a time, and you select multiple sections here, only the first section in your list will be open initially.
* **Multiple Sections Open:** To have multiple sections open by default, enable the "Allow Expansion of Multiple Sections" option

***

## **Style Properties**

{% tabs %}
{% tab title="Spacing" %}

* **Margin:**
  * **Top:** Adds space *above* the accordion.
  * **Right:** Adds space to the *right* of the accordion.
  * **Bottom:** Adds space *below* the accordion.
  * **Left:** Adds space to the *left* of the accordion.
* **Padding:**
  * **Top:** Adds space *inside* the accordion, above the content.
  * **Right:** Adds space *inside* the accordion, to the right of the content.
  * **Bottom:** Adds space *inside* the accordion, below the content.
  * **Left:** Adds space *inside* the accordion, to the left of the content
    {% endtab %}

{% tab title="Border" %}

* **Color:** Sets the color of the accordion's border.
* **Size:** Sets the thickness of the accordion's border (e.g., 1px, 2px).
* **Style:** Sets the border style (e.g., solid, dashed, dotted).
* **Radius:** Rounds the corners of the accordion's border (e.g., 5px for slightly rounded corners).
  {% endtab %}

{% tab title="Size" %}

* **Width:** Sets the width of the accordion.
* **Height:** Sets the height of the accordion.
* **Overflow:** Determines how content that extends beyond the accordion's set width or height is handled (e.g., scroll, hidden).
  {% endtab %}

{% tab title="Content" %}

* **Background Color:** Sets the background color of the accordion's content area.
* **Horizontal Alignment:** Sets how the content is aligned horizontally within each section (e.g., left, center, right)
  {% endtab %}
  {% endtabs %}

## **Why Use the Accordion Component?**

* **Organize Content:** Group related information into manageable sections, improving readability and navigation.
* **Save Space:** Keep long content hidden until needed, reducing clutter on the page.
* **Improve User Experience:** Provide a clear and intuitive way for users to access information.
* **Enhance Visual Appeal:** Create a structured and organized layout for your content.

***

## **Example Use Cases**

* **FAQs:** Present frequently asked questions with their answers in a compact format.
* **Product Details:** Organize product information into sections like "Description," "Specifications," and "Reviews."
* **Step-by-Step Guides:** Break down complex processes into manageable steps.
* **Forms:** Group-related form fields are divided into collapsible sections for better organization.

By leveraging the Accordion component, you can create user-friendly interfaces that present information concisely and engagingly.