Accordion Element

About the Accordion element

On a website, an accordion refers to a vertically stacked list of headers that visitors can click on to expand or collapse the content within. Accordions enhance interaction between customers and your online store by allowing them to control the displayed content. A commonly employed scenario for accordion design is the FAQs page, where multiple questions are listed, and viewers can simply click on a question to reveal the answer they seek.

GemPages provides an Accordion element that enables you to achieve this design on your website. To add the Accordion element to your page, please follow the steps below:

Step 1: In the GemPages Dashboard, select your page to enter the Editor.

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

Item management

Click on the arrow icon and you will see the option to input the title of the accordion. You can also control the number of accordions at this point. 

To add an additional item: Simply click on the “Add more” option. 

To duplicate an item: Hover over the desired slide and click on the duplicate icon. 

To remove an item: Hover over the specific slide and click on the trash icon.

Expand Condition

Expand mode: Select the number of items a customer can simultaneously open. Opting for the Single mode allows them to open only one item, whereas choosing the Multiple option permits them to open more than one item at the same time.

Default expanded item: Enable this option to set one of your accordion items to be initially open by default. To specify a default item, input the item order number in the “Select item” field. If you wish to have multiple items open by default, separate them with a comma.

Layout Header

Select your desired layout for the accordion. Based on the layout you choose, additional customization options will be unveiled. You will be able to pick an icon from our icon library and further customize its size and position.

Collapsible icon

At this stage, you have the flexibility to select an icon for expanding and collapsing an item. Additionally, you can fine-tune the position and size of the chosen icon.

Text header

At this point, you have the ability to edit the typography of the accordion. Here are the available options:

• Styles: Select your desired style from the pre-defined options, which include 6 heading styles and 3 paragraph styles.
• Font: Choose the font you wish to use for the text. If you want to use a font that is not listed, you can refer to the provided guidance on how to add a custom font in Editor ver 7.
• Size: Adjust the font size by specifying a value in pixels.
• Color: Modify the color of the text to your preference.

Click on the “Show more” button to reveal more customization options. 

Font Weight: Choose your desired font weight from the provided drop-down menu.

Line Height: Adjust the height of the text by specifying a percentage value.

Letter Spacing: Modify the spacing between letters by inputting a value in pixels.

Text Transform: Transform the text in one of the following ways: 

• No transformation applied.
• Uppercase: Convert all text to uppercase.
• Lowercase: Convert all text to lowercase.
• Capitalize: Capitalize the first letter of each word.

States header

You have the flexibility to determine the appearance of the accordions based on different states: normal, hover, and when clicked for accordion selection. Below are the customization options available to you:

Background Color: Customize the background of the header/ question space. 

Icon Color: Choose your preferred color for the icon. 

Text Color: Choose the text color to your preference by selecting a color from the provided palette or inputting a specific hex code.

Border: Enhance the header by adding a border. Choose the border color, thickness, and style to achieve the desired effect.

Corner: Input the value into the box to achieve your preferred corner style for the header. 

Size

Width: Input your desired width in pixels or percentages.

Item spacing: Specify the desired gap between two items in pixels.

Header height: Input your preferred height of the header into the box. 

Header Padding: Select the padding for the header from three pre-determined values – S, M, and L. Alternatively, you can opt for the custom option to input your own padding value.

Content Padding: Select the padding for the content area from three pre-determined values – S, M, and L. Alternatively, you can opt for the custom option to input your own padding value.

Item gap: Determine the gap between two items in pixels. 

Background

Select a color for the background of the entire accordion from the palette.

Item shape

Within this section, you’ll discover the option to incorporate a border, corner, and shadow effects for the items.

Configure the Advanced Tab

For more advanced customization, please navigate to the Advanced tab and follow the instructions in this article.