Accordion
Last updated
Was this helpful?
English 🇺🇸
Last updated
Was this helpful?
The 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 , elements, or to display FAQs in your store.
Before diving into the detailed steps, you can watch this video below:
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.
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.
Accordion Items
Accordion items: Add/remove/duplicate accordion(s)
Accordion Icon
Accordion icon: 3 icon styles for your preferences
Icon Size Icon Size: Set the size for an icon
Icon Position
Icon Position: Choose between left or right.
Allow Open Multiple
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
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
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 choose to style for:
Accordion Header: Customize header styling.
Accordion Content: Customize content styling.
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.
Accordion Items
Accordion items: Add/remove/duplicate accordion(s)
Header Text
Header text: Add the content and style for text inside Accordion Header
Anchor Text
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
Show Icon: Add icon for Accordion Header
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.
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.
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.
You can get further information about ATTRIBUTES, VISIBILITY, and ANIMATION parameters .
For more information, check out the here.
