1. Home
  2. Docs
  3. Xpro Addons For Beaver Builder
  4. Modules
  5. Accordion

Accordion

Introduction

The Accordion Widget is used to display text in a collapsed, condensed manner, letting you save space while still presenting an abundance of content. With the Accordion, visitors can scan the item titles, and choose to expand an item only if it is of interest.

How to open the first item as active?

Yes, we provide the option to enable the first item as active in the accordion module by following just a few steps:

Step 1: Open the Setting of Xpro Accordion Module for Beaver Builder and go to the General tab.

Step 2: Go to the Display section under the General tab section.

Step 3: Change the Expand First Item option to Yes in the Display section and save the changes by clicking on the Save button.

Now, the first item will be displayed as active and opened by default and meanwhile, other items will remain closed. Similarly, you can also disable this option by choosing No.

How to open all items at the same time?

Yes, of course! You have the option to open all the items at the same time in our accordion module and it’s very simple to use. You just need to follow the few given steps:

Step 1: Open the Xpro Accordion Module Settings and go to the General tab.

Step 2: Go to the Display section under the General accordion tab.

Step 3: Select the Collapse Inactive option to Yes in the Display section and save the changes by clicking on the Save button.

Now, open all of your items one by one and you will see all of your items will be opened at the same time. You can always change this option back to No if you want your items to be opened just one at a time.

How to add animation?

Yes, of course. Xpro Addons for Beaver Builder offer a huge list of unique Animation styles in the Accordion Module for your web page. You can select the Animation style for your website and set the Delay and Duration time limit of the Animation style.

Just follow these simple steps to choose the unique Animation Styles for your Beaver Builder site:

Step 1: Drag and Drop the Accordion Module from the Content Modules Section.
Step 2: Go to the Advanced Tab and then select the Animation Style from the dropdown list inthe Animation section. Here you will see a huge list of unique Animations.

Step 3: You can set the Delay and Duration time below the Animation list that means the time slot after which the Items Animation will be displayed on your website.

Finally, click the Save button once you are done.

Was this article helpful to you? Yes 1 No

How can we help?