About Accordion Element
The Accordion Element allows you to create collapsible content on a page, providing a cleaner user experience and potentially increasing your conversion rate. Use the Accordion Element for Tabs, Slideshow elements, or to display FAQs in your store.
Before diving into the detailed steps, you can watch this video below:
How To Access The Accordion Element
- Step 1: Click on the “Elements” icon, located as the second icon from the top on the left toolbar. Then, in the “PageFly” tab choose Accordion element
- Step 2: Drag and drop the desired element into the page editor to start using it.
The Accordion Element offers 3 variations to cover most needs, with more variations added regularly to save you time.
Drag a variation to the layout and see how it can be configured.
How To Configure For Accordion Element
The Accordion element provides numerous parameters to fine-tune content appearance for optimal conversion rates.
- Step 1: Click on the “Elements” icon, located as the second icon from the top on the left toolbar. Then, in the “PageFly” tab choose Accordion element
- Step 2: Drag and drop the variants you need into the page editor to start using them.
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
| Accordion items: Add/remove/duplicate accordion(s) |  |
| Accordion icon: 3 icon styles for your preferences |  |
| Icon Size: Set the size for an icon |  |
| 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:
If allowed, multiple accordion items can be displayed on the Live View:
|
| Default Active Item: The default accordion item is 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 the user clicks on it.
(This feature only works on the live page) |
 |
You can get further information about ATTRIBUTES, VISIBILITY, and ANIMATION parameters here.
Styling Configuration
You can choose to style for:
- Accordion Header: Customize header styling.
- Accordion Content: Customize content styling.
For more information, check out the Styling tab here.
How To Customize Accordion Header
The Accordion Element serves as an Accordion Header, where each header acts as a button controlling the visibility of its content panel.
You can Duplicate/Delete/Copy style/Paste style for each accordion header using the toolbar above it.
General Settings
| Accordion items: Add/remove/duplicate accordion(s) |  |
| 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 parameters below, you can choose Header State for it, which contains 3 options: Normal state, Mouse over state, and Active/Selected state.
Contained Element Settings
The Accordion Element can group multiple contents such as Heading, Paragraph, Image, etc. You can edit Accordion Content by dragging and dropping other elements into it like a normal section.
With this in mind, you can drag and drop any other elements inside accordion content.
Frequently Asked Questions
1. What is PageFly Accordion?
The Accordion is a graphical display with a vertically stacked list of items (labels or thumbnails). Items can be “expanded” or “collapsed” to show the complicated content. It is ideal for long paragraphs, such as in Guidelines, Terms, and Policies.
2. What can I customize inside the Accordion element?
You can add Text, Images, HTML, Headings elements, and more from the Elements available in the PageFly editor.
Previous article
