> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.teleporthq.io/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).

# How to create an accordion element

**An accordion is an interactive element composed of a header and piece of text that expands when clicking on the header. Here’s how to build one yourself in seconds.**

|    |    |
| --- | --- |
| [1. Using the accordion element](#2-using-the-accordion-element) | [2. Using conditional rendering](#2-using-conditional-rendering) |

## Using the accordion element

The easiest way to add an accordion to your website is by using our premade Accordion interactive element.

|| To make it easier to create an accordion list we suggest you add the accordion element to a component and then simply reuse the component multiple times.

### How to add the Accordion element

* Go to **Left panel -> Elements -> Interactive elements**
* **Drag the accordion element** to your page or component

![Adding the Accordion to the canvas](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/1-accordion_19f2nc9.gif)

### How to edit the Accordion element

The accordion element is composed of a trigger element and a content element, you can customize each of them individually.  

* Select the **Accordion element**
* Go to the **Right panel -> Accordion settings**
* Use the **Default state toggle** to **Open** or **Close the accordion**
* To customize either the ** trigger or content**, select either of them and **use the Right panel properties to customize them**
* **Preview the project to see how it works**

![How to edit the accordtion](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/2-accordion_v5bd3n.gif)

## Using conditional rendering

Another way to create an accordion element is to use Conditional rendering. 

Conditional rendering lets you build advanced components with elements that are rendered only when certain conditions are met. You can easily define and set up the conditions to be triggered in any way you want.

Here is an article on [How to use Conditional rendering](/en/article/how-to-use-conditional-rendering-ugtqhd/).