How to use the Accordion element


This article will help you understand what are accordions and how to use the Accordion element in GemPages.


What is the Accordion element?

On a website, an accordion is a vertically stacked list of headers that viewers can click on to expand or collapse the content inside. Accordions increase the interaction between customers and your Online store by letting them control the content they see. A popular use scenario of the accordion design is for the FAQs page that displays multiple questions, and viewers can just click on one to expand the answer they need.

In GemPages, you can achieve the same design using the Accordion element.


To learn how to make an FAQs page using Accordion, check out this article.


Add the Accordion element in GemPages

Step 1: In the GemPages Dashboard, select your page and enter the Editor via the “Edit” button.

Step 2: In the Editor, search for the Accordion element and drag & drop it onto your preferred spot on the page.

Once finished, the Accordion element’s configurations will be presented on the left sidebar, which we will cover in the next section.


Configure the Settings tab


In this section, you can:

Add/remove tabs by hitting either the duplicate icon or the trash icon, respectively.
Expand more settings by clicking on a Tab, which allow you to edit the Tab’s name and the background color.


Accordion Type

You can select either “Single” or “Multiple”from the drop-down menu for your Accordion Type:

  • Single: There can be only one tab expanded at any given time.
  • Multiple: More than one tabs could be expanded at the same time.

Icon Type

The icon appears at the end of a tab, indicating Expand and Collapse actions. You can choose from 3 options:

  • None: No icon at all.
  • Plus: Use the Plus icon for collapsed rows and the Minus icon for expanded ones.
  • Chevron: Use the Arrow down icon for collapsed rows and the Arrow up icon for expanded ones.

Click on “More settings” to adjust the Icon position and Icon color.




Open Tab

Toggling the Open Tab switch on lets you set one of your tabs to be opened by default. To set a default tab, click “More settings” and enter your Tab’s order number in the Tab Index field. (*)

(*): Always put a numeric value corresponding to to your Tab’s order number into the Tab Index field.




This section adjusts the color of the borders separating the tabs.

Extra Class

If you would like to further customize the Accordion element with coding, use this field to add a class name and then refer to it later on in the CSS file.

Configure the Design tab

Last but not least, don’t forget to fine-tune your Accordion element with the Design tab before hitting “Save” and “Publish” to bring your changes to the front store!



Click here to learn more about all GemPages elements, or contact our GemPages Support Team via email or live chat if you need any further assistance.


Was this helpful?