Accordion element

1. About Accordion ElementClick to copy

1.1. What is PageFly Accordion Element?Click to copy

The Accordion Element aims 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

Before jumping to the detailed steps; you can watch this video below:

1.2. Access the Accordion ElementClick to copy

  • 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.

accordion element

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.

2. Accordion Element ConfigurationClick to copy

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.

accordion element

In this article, we’ll show the parameters of the General and Styling tabs for the Accordion element.

2.1. General configurationClick to copy


2.1.1. Accordion OtemsClick to copy

Accordion items: Add/remove/duplicate accordion(s)

accordion element

2.1.2. Accordion IconClick to copy

Accordion icon: 3 icon styles for your preferences

accordion element

2.1.3. Icon PositionClick to copy

Icon Position: Choose between left or right.

accordion element

2.1.4. Allow Open MultipleClick to copy

Allow Open Multiple: This feature only works on the live page

Turn on/ Turn off Allow Open Multiple buttons:

accodion element

Display on the Live View:

accordion element

2.1.5. Default Active ItemClick to copy

Default Active Item: The default accordion item to be opened without being clicked on.

(This feature only works on the live page)

accordion element

2.1.6. Enable Scroll TopClick to copy

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)

accordion element

You can get further information about ATTRIBUTES, VISIBILITY, ANIMATION parameters here

2.2. Styling ConfigurationClick to copy

You can choose to style for:

  • Accordion Header
  • Accordion Content

You can check more information about the Styling tab here

3. Customise Accordion HeaderClick to copy

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.

accordion element

3.1. General SettingsClick to copy


3.1.1. Accordion ItemsClick to copy

Accordion items: Add/remove/duplicate accordion(s)

accordion element

3.1.2. Header TextClick to copy

Header text: Add the content and style for text inside Accordion Header

accordion element

3.1.3. Anchor TextClick to copy

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)

accordion element

3.1.4. Show IconClick to copy

Show Icon: Add icon for Accordion Header

accordion element

Styling configurationClick to copy

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 here

4. Contained Element SettingsClick to copy

The Accordion element is a group of multiple contents such as a 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.

5. Key TakeawaysClick to copy

Accordion is a type of display that helps sellers to present complicated content in the simplest way. Therefore, the page wouldn’t be overwhelmed of text, and has a better UI, which helps to boost interactivity and of course, sales.

6. Frequently Asked QuestionsClick to copy

6.1. What is Accordion?Click to copy

The Accordion is a graphical display comprising a vertically stacked list of items, such as labels or thumbnails. The item can be “expanded” or “collapsed”, to show the complicated content. This element is perfect for long paragraphs, for example: in Guidelines, Terms and Policies Categories.

6.2. What can I customise inside the Accordion Element?Click to copy

You can add Columns, Text, Images, HTML or Headings… any type in the Basic Elements, available in the PageFly dashboard.

Navigate this category

Thank you for your feedback!

Could not find the answer
to your question?

Chat with us
Boost your holiday sales with PageFly's Thanksgiving Template 👉 Discover Now