> For the complete documentation index, see [llms.txt](https://docs.rh-webdesign.com/cms-bundle/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.rh-webdesign.com/cms-bundle/en/elemente/inhalt-content/akkordion.md).

# Accordeon

Expandable sections/contents in the Shopping Experiences

This interactive element allows you to organize multiple informational blocks in **collapsible sections**. It helps to keep long sections of text organized, giving the user the option to expand or close content as needed.

{% hint style="info" %}
**What is the Accordion Element?**

Each section of the accordion consists of a **title** and hidden content that becomes visible when the title is clicked. This way, content like FAQs, product details, or guides can be organized without making the page appear cluttered.
{% endhint %}

<figure><img src="https://content.gitbook.com/content/hdsmo3ttoHQpDlitXnzA/blobs/tADAtAb71RMtKfNrQHoJ/Bildschirmfoto%202024-10-06%20um%2020.59.34.png" alt=""><figcaption></figcaption></figure>

### Accordion Settings

<figure><img src="https://118894700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhdsmo3ttoHQpDlitXnzA%2Fuploads%2FxHx9UEGq7lkLWAEzjKqC%2Fsnip_accordion_ss.png?alt=media&amp;token=1e778c1e-72c2-42d4-9473-25ab75b169da" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="266">Function</th><th>Description</th></tr></thead><tbody><tr><td>Sorting function (1)</td><td>Duplicate, move, and delete individual elements</td></tr><tr><td>Entry title (2)</td><td>Set the title of the entry here</td></tr><tr><td>Entry content (3)</td><td>Set the content of the entry here</td></tr><tr><td>New entry (4)</td><td>Add as many new entries as desired here</td></tr><tr><td>Entry open (5)</td><td>Choose if the entry should be open by default when the page loads</td></tr></tbody></table>

### Advanced Settings

<figure><img src="https://content.gitbook.com/content/hdsmo3ttoHQpDlitXnzA/blobs/TUMhRHOvBjrfDUd4LmbD/Bildschirmfoto%202024-10-06%20um%2021.13.30.png" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="266">Function</th><th>Description</th></tr></thead><tbody><tr><td>Vertical alignment (1)</td><td>Set the vertical alignment of the entire element. This function is useful if the accordion is displayed next to a visually taller element.</td></tr><tr><td>Display mode (2)</td><td><strong>Only one entry expandable</strong> or <strong>multiple entries expandable simultaneously</strong></td></tr><tr><td>Heading (3)</td><td>Set a heading above the accordion</td></tr><tr><td>Description (4)</td><td>Set a description above the accordion</td></tr></tbody></table>

### SEO Settings

{% content-ref url="/pages/LHlzFdFr8hVLrftTJKPh" %}
[SEO](/cms-bundle/en/elemente/konfigurationsbausteine/seo.md)
{% endcontent-ref %}