> For the complete documentation index, see [llms.txt](https://mpithemes.gitbook.io/triumph/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mpithemes.gitbook.io/triumph/template/sections/accordion.md).

# Accordion

Organizes content into expandable and collapsible sections.

*Shared Settings*:

* [<mark style="color:$primary;">Accordion layout</mark>](#accordion-layout)
* [<mark style="color:$primary;">Section layout</mark>](/triumph/template/shared-settings/section-layout.md)
* [<mark style="color:$primary;">Section mobile layout</mark>](/triumph/template/shared-settings/section-mobile-layout.md)
* [<mark style="color:$primary;">Divider line</mark>](/triumph/template/shared-settings/divider-line.md)
* [<mark style="color:$primary;">Section background</mark>](/triumph/template/shared-settings/section-background.md)
* [<mark style="color:$primary;">Colors</mark>](#colors)
* [<mark style="color:$primary;">Accordion colors</mark>](#accordion-colors)
* [<mark style="color:$primary;">Hover accordion colors</mark>](#hover-accordion-colors)

*Shared Blocks:*

* [<mark style="color:$primary;">Heading</mark>](/triumph/template/shared-blocks/heading.md)
* [<mark style="color:$primary;">Accordion</mark>](/triumph/template/sections/accordion/accordion.md)

***

**Show image**\
Changes the layout. The image displays on the side.

**Image**\
Upload or select an image to display.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2Fr5TOUd4oZT601Q8ggDOf%2Faccordion_image.png?alt=media&amp;token=d3f48fdb-9b5c-4e2b-a6c1-5b6d1e80534c" alt=""><figcaption></figcaption></figure>

***

#### Accordion layout

**Width on desktop**\
Adjusts how much horizontal space tabs take on desktop screens (30-70%).

**Position**\
Sets the position of tabs within the section:

* **Left** – Aligns text content to the left of the screen.
* **Right** – Sets text content to the right.

**Gap**\
Changes the space between the banner and tabs (30-150 px).

**Vertical alignment**\
Displays tabs at the top, center, or bottom of the banner.

***

#### Accordion colors

**Background**\
Sets the tabs' background color.

**Text**\
Controls the tabs' text color.

**Border**\
Highlights each tab.

**Icon**\
Changes the color of the icon selected in the [<mark style="color:$primary;">Accordion row</mark>](/triumph/template/sections/accordion/accordion.md).

**Carret icon**\
Sets the arrow color.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FyGqXYSYBtmEp9XYntQlN%2Faccordion_colors.png?alt=media&amp;token=aaf08dee-35c9-44fe-ab1c-1c25b3033588" alt=""><figcaption></figcaption></figure>

***

#### Hover accordion colors

**Change colors on hover**\
Turn this on to apply a different color scheme when hovering over the tab.

***

{% tabs %}
{% tab title="Desktop" %}

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FZRsPGTD8De8teFUkRRXj%2Faccordion_desktop.png?alt=media&amp;token=cced0ede-c53f-4f08-a276-6be13ad6dd93" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Mobile" %}

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FdTFvqNSYUwwPNLkKwPhs%2Faccordion_mobile.png?alt=media&amp;token=f53c70d1-4322-45d8-b12b-f273b31be2d0" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}