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

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FdkkIEqf6kGIsjVvvQUpV%2Faccordion-sections.png?alt=media" alt=""><figcaption><p>An accordion with three sections. The first is expanded, the other two show the collapsed icon.</p></figcaption></figure>

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

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2F7DtR0dJEEn4NtAO8rrXB%2Faccordion-builder-properties.png?alt=media" alt="" width="320"><figcaption><p>The Properties tab of the Edit Accordion panel.</p></figcaption></figure>

### 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 at the same time.

#### 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 allows only one 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.

**Active Section(s)** is also an output. The component writes back to it as the user expands and collapses sections, so it always holds the values of the sections currently open. You can reference it elsewhere on the page to drive other components.

#### Items

The **Items** collection defines the sections of your accordion. Click **Add Items** 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 %}

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FthM1rxUQow03glb10L1j%2Faccordion-variant.png?alt=media" alt=""><figcaption><p>The section Variant property. Shaded gives each section header a grey background.</p></figcaption></figure>

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FE62jgi3briZkbMOhHqXX%2Faccordion-icon-position.png?alt=media" alt=""><figcaption><p>The section icon Position property, Left and Right.</p></figcaption></figure>

### 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" %}
Styles each accordion section and its parts.

* **Section:** Margin / Padding, Background Color, and Border (color, size, style, radius).
* **Section Header:** Margin / Padding, Background Color, and Border (color, size, style, radius).
* **Section Content:** Margin / Padding, Background Color, and Border (color, size, style, radius).
* **Section Title:** Color, Font Size, Font Style, Font Weight.
* **Section Icon:** Background Color, Foreground Color, Foreground Color Hover.
* **Section Icon Border:** Color, Size, Style, Radius.
  {% 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.