> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/dynamic-components/components/accordion.md).

# Accordion

The Avonni Accordion component organizes related content into collapsible sections that users can expand or collapse to reveal additional information. Use it to keep long content tidy, group related details, and present a structured, easy-to-navigate layout.

## Overview

The Accordion is a container: each section acts as a collapsible region where you place the content you want to display. You're not limited to text and images — you can drag and drop any other Avonni Dynamic Component directly into an accordion section. Need a detailed table of data? Drag a Data Table into the section. Want to visualize locations? Add a Map. The possibilities are endless.

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

## Configuration

To configure the Accordion, select it on the canvas. The **Edit Accordion** panel opens on the right with two tabs: **Properties** and **Style**. The sections below mirror the Properties tab.

### Properties

#### Allow Expansion of Multiple Sections

By default, only one section can be open at a time — opening a section collapses the others. Enable **Allow Expansion of Multiple Sections** to let users keep several sections expanded simultaneously.

#### Active Section(s)

Choose which section (or sections) are expanded when the component first loads. Select from the sections you've added under **Items**.

* **One Section Open at a Time:** If the accordion only allows a single open section and you select multiple here, only the first one in the list opens initially.
* **Multiple Sections Open:** To have several sections open by default, enable **Allow Expansion of Multiple Sections** above, then select them here.

#### Items

The **Items** collection defines the sections of your accordion. Click **Add Item** to create a new section, then drag and drop any Avonni Dynamic Components into it to build its content.

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

Each item exposes the following settings:

| Setting            | Description                                                                                                        |
| ------------------ | ------------------------------------------------------------------------------------------------------------------ |
| **Label**          | The text shown in the section's header.                                                                            |
| **Value**          | A unique identifier for the section. It's used by **Active Section(s)** to control which sections open by default. |
| **Variant**        | Choose **Base** for a standard appearance or **Shaded** for a subtle background effect. Default is **Base**.       |
| **Hide Icon**      | Hide the expand/collapse icon shown in the section header. When hidden, the icon settings below no longer apply.   |
| **Collapsed Icon** | The icon displayed when the section is collapsed. Default is `utility:chevronright`.                               |
| **Expanded Icon**  | The icon displayed when the section is expanded. Default is `utility:chevrondown`.                                 |
| **Position**       | Place the icon on the **Left** (default) or **Right** of the section header.                                       |
| **Size**           | The icon size: XX-Small (default), X-Small, Small, Medium, or Large.                                               |

{% hint style="info" %}
**Collapsed Icon**, **Expanded Icon**, **Position**, and **Size** are only available when **Hide Icon** is turned off.
{% endhint %}

### Set Component Visibility

All components support conditional visibility — see [Component Visibility](/dynamic-components/core-concepts/component-visibility.md).

## 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 into collapsible sections for better organization.

## Styling

The Accordion offers extensive styling options to help you integrate it seamlessly into your Salesforce environment. Configure them from the **Style** tab of the Edit Accordion panel.

{% tabs %}
{% tab title="Margin" %}
Controls the *outer* spacing around the entire accordion.

* **Top / Right / Bottom / Left:** Adjust the space on each side of the accordion.
  {% endtab %}

{% tab title="Padding" %}
Controls the *inner* spacing between the accordion's content and its border.

* **Top / Right / Bottom / Left:** Adjust the inner spacing on each side.
  {% endtab %}

{% tab title="Border" %}
Customizes the border surrounding the accordion.

* **Color:** Set the color of the accordion's border.
* **Size:** Set the thickness of the accordion's border.
* **Style:** Set the border style (solid, dashed, dotted, etc.).
* **Radius:** Round the corners of the accordion's border.
  {% endtab %}

{% tab title="Size" %}
Controls the accordion's dimensions.

* **Width / Height:** Set fixed dimensions for the accordion.
* **Overflow:** Determine how content that extends beyond the set dimensions is handled (scroll, hidden, etc.).
* **Min Width / Max Width / Min Height / Max Height:** Constrain the size within bounds.
  {% endtab %}

{% tab title="Background" %}
Sets the accordion's background.

* **Color:** Set the background color of the accordion.
  {% endtab %}

{% tab title="Section" %}

* **Margin / Padding:** Adjust the spacing around and inside each section.
* **Background Color:** Set the background color of each section.
* **Border:** Customize the section's border color, size, style, and radius.
  {% endtab %}

{% tab title="Section Header" %}

* **Margin / Padding:** Adjust the spacing around and inside the section header.
* **Background Color:** Set the background color of the section header.
* **Border:** Customize the header's border color, size, style, and radius.
  {% endtab %}

{% tab title="Section Content" %}

* **Margin / Padding:** Adjust the spacing around and inside the section content area.
* **Background Color:** Set the background color of the content area.
* **Border:** Customize the content area's border color, size, style, and radius.
  {% endtab %}

{% tab title="Section Title" %}

* **Color:** Set the color of the section title text.
* **Font Size:** Adjust the title font size.
* **Font Style:** Set the title font style.
* **Font Weight:** Set the title font weight.
  {% endtab %}

{% tab title="Section Icon" %}

* **Background Color:** Set the background color of the section icon.
* **Foreground Color:** Set the icon color.
* **Foreground Color Hover:** Set the icon color on hover.
  {% endtab %}

{% tab title="Section Icon Border" %}

* **Color:** Set the icon border color.
* **Size:** Set the icon border thickness.
* **Style:** Set the icon border style.
* **Radius:** Round the corners of the icon border.
  {% endtab %}
  {% endtabs %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.