> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.dorik.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Accordion

# Getting Started

The accordion element in Dorik provides an intuitive and space-efficient way to present content on your website. It's a versatile design component that allows users to reveal additional information without overwhelming the page layout. This article will provide a guide on how to add an accordion to your website.

---

# Adding Accordion to your site

By following the simple steps below, you can easily add the Accordion element ****to your site. 

- Click on + **Add Element or Containers** in an empty Container
- From the **Elements** option, select the **Accordion** element

**Refer to the picture below:**

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_17w4038.png)


![Accordion Element](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_1s7s13y.png)


![Accordion Element after it is added](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_1sc0qub.png)

---

# Editing and Adjusting Accordion

Follow the steps and instructions below to add and edit an Accordion on your site.

The Accordion element editor has the following options:

- Accordions
- Accordion Styles
- Heading Styles
- Content Styles
- Background

**The Accordion element editor:**


![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_nqpyae.png)

---

## Accordions

The **Accordions** on your site can be managed from the **Accordions panel** on the **Accordion editor.**

**Refer to the texts under the pictures for detailed information ⬇️**

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_ldc1xn.png)


![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_199ywhe.png)


|| Accordion Heading: Change the heading of your Accordion here.

|| Paragraph: Add a paragraph inside your Accordion using the built-in text editor.

---

## Accordion Styles

This panel lets you stylize your accordions, add border & radius and change the background.

|| Accordion Gap: Change the gap between the accordions

|| Border & Radius: Add a border and adjust the radius of the accordions

|| Background: Add Solid or Gradient color background and edit it


Refer to the **GIFs** below to see the demonstration:


![Accordion Gap](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2023-12-28-at-34_1ppb6i5.gif)


![Border & Radius](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2023-12-28-at-34_wdqyw9.gif)


![Background](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2023-12-28-at-34_fbflcu.gif)

---

## Heading Styles

The Heading styles option lets you style and customize the heading on your Accordion. With options like adjusting the heading size, changing the color, adjusting the padding and margin, and adding a background to it.

Refer to the **Video** below to see the demonstration:

${youtube}[Accordion Heading Style](JCSmd4S-z-s)

---

## Content Styles

The Content styles option lets you stylize the content on your Accordion. With options like adjusting the text size, changing the color, adjusting the padding and margin, and adding spacing.

Refer to the **GIFs** below to see the demonstration:

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2023-12-28-at-35_83hff3.gif)

---

## Background

With this option, you can change the background of your accordion element. You can add color, gradient, or any image of your choice.

Refer to the **GIF** below to see the demonstration:

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2023-12-28-at-35_1n6d7hc.gif)

---

---

# Related articles


[Navigation](/en/article/navigation-rkzj82/)

[Icon](/en/article/icon-f87rha/)