Accordion element

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

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.

pagefly accordion 1

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.

pagefly accordion 3

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 pagefly accordion 4
Icon Position: Choose between left or right.pagefly accordion 5
Allow Open Multiple: This feature only works on the live pageTurn on/ Turn off Allow Open Multiple buttons

pagefly accordion 6Display on the Live View:

pagefly accordion 7

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

(This feature only works on the live page)

pagefly accordion 8
Enable Scroll Top: Automatically scroll to the top of an accordion header when user clicks on it.

(This feature only works on the live page)

pagefly accordion 9

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

Styling configuration

You can choose to style for:

  • Accordion Header
  • Accordion Content

You can check more information about the Styling tab here

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.

pagefly accordion 10

General configuration

Accordion items: Add/ Delete/ Move/ Duplicate accordion(s)pagefly accordion 11
Header text: Add the content and style for text inside Accordion Headerpagefly accordion 12
Anchor Text: Add link label or link text is the visible, clickable text in an HTML hyperlink for Accordion Header

(This feature only works on the live page)

pagefly accordion 13
Show Icon: Add icon for Accordion Headerpagefly accordion 14

Styling configuration

For Accordion Header Styling, aside from the below parameters, you can choose Header State for it, which contains 3 options: Normal, Hover, Selected.

pagefly accordion 15

You can check more information about the Styling tab here

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.

pagefly accordion 16

With this in mind, you can drag and drop any other elements inside accordion content.

Navigate this category

Do you want to get more sales from the same amount of traffic?

PageFly can help you. We are the best page builder app to give you the freedom to customize your page, build trust and gain more sales.

Explore PageFly
PageFly Languagues

PageFly Help Center is now available in French, Portuguese and Chinese. Please check the flags on the page header.

I got it!