# Accordion ### About Accordion Element The [Accordion Element](https://help.pagefly.io/manual/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](https://help.pagefly.io/manual/tabs-element), [Slideshow](https://help.pagefly.io/manual/slideshow-element) elements, or to display FAQs in your store. Before diving into the detailed steps, you can watch this video below: {% embed url="" %} ### 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. ![](/files/lWxiX2duANhLiSfBC2Ww) The Accordion Element offers 3 variations to cover most needs, with more variations added regularly to save you time. ![](/files/eSqf1kEhySxKSPSYuriL) 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. ![](/files/oyo9hx1JnuUmome9lobJ) In this article, we'll show the parameters of the General and Styling tabs for the Accordion Element. #### General Configuration |

Accordion Items

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

| ![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXfBcNBEner0VuUwB2YGV0G4YF7PqxjDN4IeRwpN15Kjf92c0TsHZ4qMNAw0aqJjbA793cgPKNympaotQlnvGsEwomx4YujODI10znM6FzgNzHDq0IDbSckYHEPX7fJgI4iNuMhToYFPEG9_mTiYtL_z0T8?key=wnUuvUcpwaYrnWBU5BaUjQ) | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | |

Accordion Icon

Accordion icon: 3 icon styles for your preferences

| ![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXdvnW09dlfpxL3hN0QSThbnBVGZxaSbyzdvNwikxSHmujpSHS8kIvyiwju92Scx_NodPAe-7tkMiRSA6p6OeJSuOPID6klGittfp1vX5JA81IUIL4iXIjhkyz8mgzWlIG3OtaAofSoXLk6jc6h7RLfYrA0?key=wnUuvUcpwaYrnWBU5BaUjQ) | |

Icon Size
Icon Size: Set the size for an icon

| ![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXdcwLdWtxvEAGoaTtxYlaP4cnvZtJZBkbAW0UjTJKuJB34S-dtFrZz9X1KUU0fzZVzmvBsTNW7A8A2uwZi8jMMmJfGpNOZD4uzuhtAkrEuS2hfzrDB1nfo_uTAmjcBCpIwFxzqX07R3Nz3ulFDx3LAPS_c?key=wnUuvUcpwaYrnWBU5BaUjQ) | |

Icon Position

Icon Position: Choose between left or right.

| ![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXeS7aoTEP78ntGNiC8cWR4V02Ve7XZPvmWdxbrfrPRSt4bdrj0glSKP4QQLMQONipfh0BePFZeii1q2TdXpmxoZwMjA1Pvn-lICqOdNhWcD1CD-hiBh6EEdBIuKFfIyEOhosKcAgyxxvhh_uR_PnKrcA_94?key=wnUuvUcpwaYrnWBU5BaUjQ) | |

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)

| ![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXd1X3PqYAC4U3itYOE1TB0py-7ALzClPjS_Zo5MLgkg0prRMyUk1O4hRkQ66W9gcu_BpeIo4D0dmFLelAKhjMDO1FgLwzZQqKyt3dBwJVZKUeCIjZKIKSZ0oHrq2LNHJC8d0ssw5jVM8zIo6hKNB0eFSnOM?key=wnUuvUcpwaYrnWBU5BaUjQ) | |

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)

| ![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXf9pIdcfahW29FIx5JtoUNeyIELhA5e09NP9HLVplNLSDtJRwkENgSEB2xnX0ZffGufpyPQzns7e0WzYw6RYYKMvra3SmLQnoopyj4m21g2Me4wMKvj5Si6Hqmz9ZRr6cLRNl1Z0cR86EV_Va1x4pdpVQca?key=wnUuvUcpwaYrnWBU5BaUjQ) | You can get further information about **ATTRIBUTES, VISIBILITY, and ANIMATION** parameters [here](https://help.pagefly.io/manual/elements-general-settings/). #### 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](https://help.pagefly.io/manual/elements-style-settings/) 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. ![](/files/U1kD1LZkj5TUqkcsfVnT) #### General Settings |

Accordion Items

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

| ![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXeEMxnvSuDSeBiGI9S5aXq_TUGarzx9D5tgE4kTE54OOfHe1SJtKD4q1mNYiuvyo2yDrNe_kier4OMT9y9XCOSoPfa5-ghns8wWpk_9CLt-9zv0xeI9Vz_LQORtklrXZDVKtny8ebPX05K4ozAbfSAGiwms?key=wnUuvUcpwaYrnWBU5BaUjQ) | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | |

Header Text

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

| ![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXfe-Y6QPVsKOQTi9n-Cus2nEmGX40XdEoQZp0mYfovZ0ZtU86Od4myR8VQGBSZmcTsPTOMTkv_1Nyu6Q6meUCrWNpRYdROjb03KvCA1t5cW7LEXpO5S-ZLMF0YCpr1PO8YHw4eKP-ME7i0OB667QkZgdfw?key=wnUuvUcpwaYrnWBU5BaUjQ) | |

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

| ![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXf1Au1WMbkidPFHO7J8yQh6tze_89njGJvmvukAEho4EUMk61EI5qi0GrMy17s9go-sR3TlwVhw2XCmgHZGGjF67r1hj8RbBdbBZ_P5cmz3ji1S5Dv4TeP4Wagbko23O4drCjZnTBZYeWqqgQtezwpT7ogG?key=wnUuvUcpwaYrnWBU5BaUjQ) | #### 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. ![](/files/JOQCRfV9d5hcDDC5O2d6) 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. ### Additional Resources * [Use Case - Add Accordion](https://pagefly.io/pages/use-case-add-accordion) --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://help.pagefly.io/page-structure-and-elements/pagefly-elements/containers/accordion.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.