# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.avonnicomponents.com/dynamic-components/components/accordion.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.