> For the complete documentation index, see [llms.txt](https://docs.realmacsoftware.com/elements-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.realmacsoftware.com/elements-docs/using-elements/components/navigation-and-interaction/accordion.md). # Accordion The Accordion component organises content into sections that visitors can open and close. It is useful for FAQs, service details, feature explanations, and other pages where displaying everything at once would create unnecessary scrolling. Each Accordion has separate Title and Content drop zones, so both areas can contain Text, Images, SVGs, or other suitable components. {% embed url="" %} ### How to Use Accordion You’ll find Accordion under **Interactive** in the Components list. 1. Drag **Accordion** onto the page. 2. Add components to its Title and Content drop zones. 3. Choose whether it starts Open or Closed. 4. Use Grouping when only one Accordion in a set should remain open. 5. Style the Summary and optional SVG icon for open and closed states.
The Accordion component highlighted in the Interactive section of the Components list

The Accordion component is in the Interactive category.

### Component Settings {% hint style="info" %} The Transitions settings adjust the speed of the animation when using the transform, filter, and effects properties. They do not currently affect the duration of the accordion opening or closing. {% endhint %} #### Settings **Show Content in Edit** is enabled by default. Disable it to preview the collapsed structure while editing. **Default State** chooses Open or Closed and defaults to Closed. #### Tags Add one or more tag titles when the Accordion should be controlled by Filter or Filter Tags. #### Filter Enable filtering to make the Accordion a filterable item. Use Parent grouping or a Custom Group ID, then choose the Dim, Zoom Out, or Slide transition. #### Grouping **Group** * **None** — The Accordion opens independently. * **Parent** — Groups Accordions inside the same parent. This is the default. * **Custom** — Groups Accordions that share a Group ID. **Group ID** appears for Custom. Replace the default `unique-group-id` with the same value on every Accordion in the group. Grouping ensures that opening one Accordion closes the others in the same group. #### Summary **State** switches the Inspector between Open and Closed styling. It defaults to Closed. Each state has its own **Background** colour. Both default to None. **Padding** applies to the clickable summary area and defaults to theme spacing 2 vertically and 3.5 horizontally. #### Icon **Show Icon** is enabled by default. * **SVG** — Selects the icon resource. * **Alignment** — Places the icon first or last. Last is the default. * **Size** — Accepts any valid CSS size and defaults to `24px`. * **State** — Switches between Open and Closed icon styling. * **Rotation** — Defaults to 90° for Open and 180° for Closed. * **Color** — Sets the SVG colour for each state and defaults to Surface 900. ### Accessibility Use concise, descriptive titles that explain the hidden content. Do not place essential information only in a closed section without making the title clear. ### Tips and Best Practices * **Group related items:** Parent grouping is the simplest way to create a traditional one-at-a-time accordion. * **Keep titles short:** Visitors should be able to scan the complete set quickly. * **Use a familiar icon:** Chevrons and plus/minus symbols clearly communicate expansion. ### Related Components * [Tabs](/elements-docs/using-elements/components/navigation-and-interaction/tabs.md) — Switches between parallel content sections. * [Dropdown](/elements-docs/using-elements/components/navigation-and-interaction/dropdown.md) — Reveals a compact panel from a trigger. * [Filter Tags](/elements-docs/using-elements/components/data-and-organisation/filter-tags.md) — Can show and hide tagged Accordions. | Common Control | Description | | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------- | | [Link](/elements-docs/using-elements/components/common-controls/link.md) | Link to a page, resource, anchor, email address, or website. | | [Layout](/elements-docs/using-elements/components/common-controls/layout.md) | Control positioning, stacking, visibility, overflow, and isolation. | | [Sizing](/elements-docs/using-elements/components/common-controls/sizing.md) | Set width, height, and responsive size constraints. | | [Spacing](/elements-docs/using-elements/components/common-controls/spacing.md) | Add responsive margin and padding. | | [Typography & Text Styles](/elements-docs/using-elements/components/common-controls/typography-and-text-styles.md) | Control fonts, text spacing, decoration, colour, and semantic wrappers. | | [Backgrounds](/elements-docs/using-elements/components/common-controls/backgrounds.md) | Apply colour, image, gradient, SVG, video, and hover backgrounds. | | [Transitions](/elements-docs/using-elements/components/common-controls/transitions.md) | Choose what animates and set its timing curve, duration, and delay. | | [Effects](/elements-docs/using-elements/components/common-controls/effects.md) | Apply shadows, opacity, and hover effects. | | [Filters](/elements-docs/using-elements/components/common-controls/filters.md) | Apply blur, brightness, saturation, shadow, and backdrop effects. | | [Transforms](/elements-docs/using-elements/components/common-controls/transforms.md) | Scale, rotate, move, and skew components. | | [Borders](/elements-docs/using-elements/components/common-controls/borders.md) | Set border style, colour, opacity, width, radius, and hover states. | | [Advanced](/elements-docs/using-elements/components/common-controls/advanced.md) | Add CSS classes and IDs, or change supported HTML tags. | --- # 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.realmacsoftware.com/elements-docs/using-elements/components/navigation-and-interaction/accordion.md?ask=&goal= ``` `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.