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

# Accordion

The **Accordion** block allows you to create a series of collapsible rows, perfect for frequently asked questions (FAQs), detailed product information, or organized content lists. Users can click on the row title to expand and view the hidden content.

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FrHlzTeM7U7Fb53n8n0qi%2Fimage.png?alt=media&amp;token=32063b18-ac5d-43da-a2c5-d83a19ebd15d" alt=""><figcaption></figcaption></figure>

## General settings

| Setting                  | Description                                                                                                                                                                              |
| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Inherit Color Scheme** | A checkbox that, when enabled (Default), uses the color scheme from the parent section.                                                                                                  |
| **Colors**               | <p><em>Only visible when Inherit Color Scheme is disabled</em>.</p><p>Allows you to manually select a specific Color Scheme for the block, overriding the parent section's settings.</p> |

## Typography

| Setting            | Description                                                                                                                                      |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Heading Size**   | Sets the font size for the title (heading) of each collapsible row, measured in pixels (px) (Range: 16px to 32px).                               |
| **Heading Weight** | Sets the font thickness for the row title: Bold (600) (Default) or Medium (500).                                                                 |
| **Space between**  | Sets the vertical space (gap) between the row title and the content area when the row is expanded, measured in pixels (px) (Range: 0px to 30px). |

## Style

| Setting              | Description                                                                                                                                                                                |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Icon Style**       | Defines the style of the expand/collapse indicator icon: Caret (Default — a simple arrow) or Plus (A plus/minus sign).                                                                     |
| **Row Style**        | Sets the visual style for separating the rows: Background (Uses background color for visual separation) or Divider (Default — uses a horizontal line/border).                              |
| **Background Color** | <p><em>Only visible when Row Style is Background</em>.</p><p>Sets the background color for each accordion row.</p>                                                                         |
| **Corner Radius**    | <p><em>Only visible when Row Style is Background</em>.</p><p>Controls the rounding of the row element's corners: None (Sharp corners) or Custom (Allows you to set a specific radius).</p> |
| **Custom Radius**    | <p><em>Only visible when Corner Radius is Custom and Row Style is Background</em>.</p><p>Sets the custom corner radius for the rows, measured in pixels (px) (Range: 0px to 50px).</p>     |

## Item spacing

| Setting         | Description                                                                                                                                                                         |
| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Gap Row**     | <p><em>Only visible when Row Style is Background</em>.</p><p>Sets the vertical space (gap) between each individual accordion row, measured in pixels (px) (Range: 0px to 30px).</p> |
| **Padding Row** | Sets the inner vertical padding inside each row (above and below the title), measured in pixels (px) (Range: 0px to 50px).                                                          |

## Block settings

### Accordion row

| Setting          | Description                                                                                                                                                                           |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Heading**      | <p>Specifies the title for an individual accordion row.<br>This heading serves as the clickable element that expands or collapses the row’s content.</p>                              |
| **Open default** | <p>When enabled, the accordion row will be expanded and its content visible when the page loads.</p><p>When disabled, the row remains collapsed until the user clicks to open it.</p> |

{% hint style="success" %}
In addition to the default [**Text**](https://nextsky.gitbook.io/purity-theme/group-blocks/basic/text) block, you can add multiple other block types inside an **Accordion row**.

This allows you to enrich the expanded content area with features such as images, buttons, videos, icons, or custom HTML, providing a more interactive and versatile presentation.
{% endhint %}