> For the complete documentation index, see [llms.txt](https://modutheme.gitbook.io/helix/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modutheme.gitbook.io/helix/theme-blocks/layout/accordion.md).

# Accordion

Collapsible rows built from the blocks you nest inside — ideal for FAQs, product details, or shipping information.

## Settings

| Setting                             | Description                                                                                                                                   |
| ----------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
| Style                               | **Simple** — no background or border, a clean line-based look. **Boxed** — each row is a bordered card with optional shadow and color scheme. |
| Icon                                | Toggle indicator: **Chevron** or **Plus**.                                                                                                    |
| Dividers                            | Show divider lines between rows. Simple style only.                                                                                           |
| Heading typography                  | Font, font size, and letter spacing for the row titles.                                                                                       |
| Border thickness / Shadow / Padding | Appearance of each accordion row. Boxed style only.                                                                                           |
| Gap                                 | Space between rows — set separately for desktop and mobile.                                                                                   |
| Width                               | **Fill** or **Custom** — set independently for desktop and mobile, with an optional **Max width**.                                            |
| Color                               | **Inherit** the section's color scheme, or apply a separate **Color scheme**.                                                                 |

## Available blocks

### Accordion row

One collapsible row. Add one block per row.

| Setting             | Description                        |
| ------------------- | ---------------------------------- |
| Heading             | The row title shown on the toggle. |
| Open row by default | Starts the row expanded.           |

Each row holds these blocks:

| Block                                                             | Description                                        |
| ----------------------------------------------------------------- | -------------------------------------------------- |
| [Heading](/helix/theme-blocks/basic/heading.md)                   | Main headline.                                     |
| [Subheading](/helix/theme-blocks/basic/subheading.md)             | Small label above or below the heading.            |
| [Text](/helix/theme-blocks/basic/text.md)                         | Rich-text paragraph for supporting copy.           |
| [Button](/helix/theme-blocks/basic/button.md)                     | Single call-to-action with label, link, and style. |
| [Buttons](/helix/theme-blocks/basic/buttons.md)                   | Two side-by-side buttons.                          |
| [Image](/helix/theme-blocks/basic/image.md)                       | Inline image.                                      |
| [Video](/helix/theme-blocks/basic/video.md)                       | An uploaded or external video.                     |
| [Icon](/helix/theme-blocks/basic/icon.md)                         | An icon from the theme library.                    |
| [Collapsible text](/helix/theme-blocks/basic/collapsible-text.md) | Long text with a show-more toggle.                 |
| [Countdown timer](/helix/theme-blocks/basic/countdown-timer.md)   | A live countdown to a set date.                    |
| [Coupon code](/helix/theme-blocks/basic/coupon-code.md)           | A copyable discount code.                          |
| [Colors](/helix/theme-blocks/basic/colors.md)                     | A row of color swatches.                           |
| [Contact form](/helix/theme-blocks/forms/contact-form.md)         | A customizable contact form.                       |
| [Email signup](/helix/theme-blocks/forms/email-signup.md)         | A newsletter signup form.                          |
| [Group](/helix/theme-blocks/layout/group.md)                      | A container that arranges several blocks together. |
| [Divider](/helix/theme-blocks/layout/divider.md)                  | A horizontal line between content blocks.          |
| [Popup](/helix/theme-blocks/links/popup.md)                       | A button that opens an overlay.                    |
| [Product card](/helix/theme-blocks/cards/product-card-compact.md) | A compact product card.                            |