Getting Started

An accordion is a design element that expands in place to expose some hidden information. Unlike overlays, accordions push the page content down instead of being superposed on top of the page content. This article will feature the steps toward adding an accordion to your website.

Adding the Accordion Element

Follow the steps below to add Accordion to your site.

- Click on Add Element in an empty row and section
- From the General Elements section, select Accordion

Refer to the picture below:





Accordion Element after it is added

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:

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 ⬇️





Accordion Heading: Change the heading of your Accordion here.

Accordion 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 a background and edit it

Refer to the GIFs below to see the demonstration:

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 GIFs below to see the demonstration:

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:

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:

Related articles

To add Accordion on site. Please check following video for working example.

Updated on: 28/02/2023