Advanced Accordion

Advanced Accordion is designed to show information in attractive blocks with collapsible effects. This tool will show one information below another one in tabs, which will open up once you click it. Mostly useful for creating FAQs, tabs, and more.

Using Advanced Accordion:

To set up an Advanced Accordion block, follow the steps below.

Step 1:

From the menu bar on the left-hand side, select Advanced Accordion. Drag and drop the widget on the area you want it to be in.

Step 2:

To edit the Accordion block’s title section. Just simply click on the title section of your accordion block and you will find the following options: Content, Style, and Advanced.

From here you can edit Title, Subtitle, Content and Section Link.

Step 2.1:

Content

Lets you change key aspects of the Title, Subtitle, Content and Section Link. Such as you can change the title, add subtitle, description, or image. You also have the option of hiding sub menu and content.

Step 2.2:

Style

Each of these title section options can be further customized with the style options such as background color, typography, Text Color, Text Alignment, Margin, Padding, and more.

Step 2.3:

Advanced options

If you want to add some effects to your title section and create something unique and eye catchy. Just head over to Advanced options and tweak the options to your preference.

From this advanced section you can change and tweak an array of options such as – Droit Effect, CSS Transform, Motion Effect, Background, Border, Mask, Positioning, Responsive and more.

Step 3:

Adding Accordions

Content

From the Content section, you can add the Accordion title and description. And add as many accordion tabs you need. You can add Icons and SVG format images to these accordion tabs.

Step 4:

Now lets add content to accordions, start by clicking on the accordion you want to add content to. You will find the edit icon on the right hand side.

Click on this to start adding content into the accordions.

You can add anything in here.

Step 5:

For example I have dropped the Text Editor widget and added this text. You can use any widget on this section and customize it how you want. After you’re done, click update.