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.
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
Tabs
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.
Border
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!
