In this article, you will learn about the Accordion element and how to use it.
About Accordion element
The Accordion element is used to create collapsible content on a page to provide a cleaner user experience and increase your conversion rate. You can use the Accordion element as the content for Tabs, Slideshow element or to show FAQs of your store.
Install PageFly for Free here
Before jumping to the detailed steps, you can watch this video below:
Access the Accordion element
Step 1: Click on the Plus icon which is the Add element function
Step 2: Click on the Accordion element in the dropdown menu
Step 3: Drag and drop the element you want into the page editor and then start using it.
The Accordion element comes with multiple variations covering most needs. But we will continue to add more variations to help you save time.
Drag a variation to the layout and see how it can be configured.
Accordion element configuration
Accordion element comes with plenty of parameters allowing you to fine-tune content appearance for the best possible conversion rate.
Select the element in the layout to see its parameters.
In this article, we’ll show the parameters of the General and Styling tabs for the Accordion element.
General configuration
CONTENT | |
Accordion items: Add/remove/duplicate accordion(s) | ![]() |
Accordion icon: 3 icon styles for your preferences | ![]() |
Icon Position: Choose between left or right. | ![]() |
Allow Open Multiple: This feature only works on the live page | Turn on/ Turn off Allow Open Multiple buttons Display on the Live View: |
Default Active Item: The default accordion item to be opened without being clicked on. (This feature only works on the live page) | ![]() |
Enable Scroll Top: The page will automatically scroll to the top of an accordion header when user clicks on it. (This feature only works on the live page) | ![]() |
You can get further information about ATTRIBUTES, VISIBILITY, ANIMATION parameters
Styling configuration
You can choose to style for:
- Accordion Header
- Accordion Content
You can check more information about the Styling tab
Accordion Header
Accordion element that serves as an Accordion Header. Each Accordion Header element plays a role as a button that controls the visibility of its content panel.
You can Duplicate/Delete/Copy style/Paste style for each accordion header in the toolbar right above it here.
General configuration
CONTENT | |
Accordion items: Add/ Delete/ Move/ Duplicate accordion(s) | ![]() |
ACCORDION SETTING | |
Header text: Add the content and style for text inside Accordion Header | ![]() |
Anchor Text: Add anchor text here. In live view, you can add the ‘#” icon with anchor text behind the page URL to scroll down exactly to this accordion header element. (This feature only works on the live page) | ![]() |
Show Icon: Add icon for Accordion Header | ![]() |
Styling configuration
For Accordion Header Styling, aside from the below parameters, you can choose Header State for it, which contains 3 options: Normal state, Mouse over state, and Active/Selected state.
You can check more information about the Styling tab
Contained element setting
The Accordion element is a group of multiple contents such as Heading, Paragraph, Image,… You can edit Accordion Content by dragging and dropping other elements in it as a normal section.
With this in mind, you can drag and drop any other elements inside accordion content.