Articles on: Code snippets & Interactions

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.

Using the accordion element
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

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

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.

Updated on: 28/03/2025

Was this article helpful?

Thank you!