The Accordion module of the page designer lets you add a vertical list that can be expanded to display more details and collapsed to show less, having the information easily accessible without cluttering the page. It is commonly used for Q&A, FAQ, and featured lists.

Go to the page designer, and add a new module by clicking on the gray plus sign. Choose the accordion module from the list. If you prefer to find the module automatically, it’s also possible to type it in the search bar on top.

Define contents

Define what will appear in your accordion using the Content tab.

Add New Accordion Item

Every time you add an item, you can edit its individual settings, including:

• Title: the text that will show when the accordion is closed and above the item content when the item is opened.
• Content: this is displayed when the item is opened.
• Link: if you want the item to open a link when clicked, define it here.
• Background: select a background color, image or video.

The design options of the individual item are:

• Icon color: define the color of the icon inside each toggle that visitors click to open the item.
• Open toggle text color: adjust the text color of opened items.
• Open toggle background color: adjust the background color of opened items.
• Closed toggle text color: adjust the text color of closed items.
• Closed toggle background color: adjust the background color of closed items.
• Text: define the orientation, color, and shadow of the text.
• Sizing: select the width of the item.
• Spacing: adjust the margins and padding.
• Border: define the corners and border style, width, and color.
• Box shadow: you can select a box shadow.
• Filters: adjust the scheme of colors of the bar.

In the advanced options of the individual item, it’s possible to introduce custom CSS code and to define transitions.

Link

If you want that the module opens a new URL when someone clicks on it, paste that link here and decide if the link will open in the same window or tab.

Background

Add a background color, gradient, image or video to your module.

Admin label

You can modify the module’s label for easier identification.

Customize the design

With these settings, you can customize your design.

Icon

Select an icon color for the accordion.

Text

Adjust the orientation and shadow of the text.

Body Text

Define the font, color, alignment, line height, and other settings for the body text of the accordion.

Toggle

Define the text color and the background color when the toggle is open or closed. Adjust also the text font, alignment, color, size, letter spacing, line height, and text shadow.

 

Sizing

Adjust the width of the module.

Spacing

Customize margins and padding sizes.

Border

Define the border’s corner, style, color and width for your module.

Box Shadow

Here you can enable box shadow.

Filters

Adjust the hue of the module as a whole.

Animation

Give an animation style to the module, like fading or sliding when it appears.

Advanced settings

Using this tab you are able to insert CSS code, select device visibility, and manage transitions. Check this guide to know more about how to use these settings.

Use Case

Let’s create an example of FAQ for the return service of an online shopping website.

We start by creating three items, each with a different FAQ.

Now we add the design options for the general module:

Icon Color: #000000

Body Text Color: #474747

Text Orientation: left

Open Toggle Text Color: #140206

Open Toggle Background Color: #d6d6d6

Closed Toggle Text Color: #000000

Closed Toggle Background Color: #efbac8

Toggle Text Size: 20px

This is the final result.