How to use Accordion Element?

Modified on Thu, 28 Dec 2023 at 04:23 PM

An Accordion element is like a digital folder that can be opened or closed. It helps organize information on a webpage, making it easy for users to see only what they're interested in. Each "folder" has a title (question) and can contain additional details (answers) that users can reveal or hide with a click.

The Accordion element is used for creating interactive and organized FAQ sections within the editor.


Steps to add the Accordion element inside the FlexiFunnels:

1. Open your editor, Navigate to the components section and select "elements." 



2. Click the accordion element among the available options and drag the accordion element into the editor workspace. 


3. To customize the Frequently Asked Questions (FAQs), access the accordion's settings. 



4. After clicking on the settings of the accordion element, the popup opens, and there, you can click on the advanced settings for the accordion feature. 



5. Within the Advanced settings, you will find more options:


a.) Border Styling: Modify the border appearance to suit your design preferences. 



Different types of border styling

1. With Border style


2. With a Spaced border style



3. With Transparent Border style





b.) Icon Position and Icon Type: Adjust the icon's position and choose from a variety of available icons. 


Icon Positions


Icon Type


1. Plus Icon type



2. Plus-circle Icon type



3. Angle Icon type



4. Angle circle Icon type




c.) Option to Change Questions: Click on the edit option to modify the questions for the FAQ section.



Note: To change the answer, navigate to the "Answers" section. Double-click on the answer you want to modify, and you can rewrite both the question and answer from the advanced settings.


d.) Add a toggle option by which you can add another set of Questions and Answers dynamically. This allows you to expand your FAQ section as needed. 




Samples of FAQs created by Accordion element: 




  




Congratulations!! You have made your first FAQs section.




Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article