How Can We Help You?

Advanced Accordion

How to Configure and Style UBE Advanced  Accordion

Make your important content readable to the user with Advanced Accordion Widget on your pages without scrolling down

Using Advanced Accordion:

You can see the below video to get an insight into how you can use the Advanced Accordion Widget to create beautiful designs. Or you can follow the documentation whichever you find convenient.

How to Activate Advanced Accordion

To use this UBE Addons element, find the Advanced Accordion‘ element from the Search option under the ELEMENTS tab. Simply just Drag & Drop the Advanced Accordion into the Drag widget here‘ or the ‘+’ section.

After you are done with Step 1, this is the basic layout you are going to view:

How to Configure Content Settings

Under the ‘Content’ tab, you will find the General Settings sections.

General Settings

From the ‘General Settings’ section,

Accordion Type Choose accordion type, including accordion and toggle
Spacing Allow spacing between item or not
Accordion Tab Icon Position Choose the position of the icon is to the left or right of the accordion item
Scheme Choose the default color for the tab including border, text and background depending on the style of the tab.
Icon Allow displaying icons on tabs or not

Content: each item of the accordion includes:

Active as Default Whether for active default or not
Scheme Choose background color of the current item
Title Enter the title of the accordion
Description Entered by editing each item, adding the widget you want.

How to Style Advanced Accordion

Switch to the ‘Style’ tab to style all the elements of Advanced Accordion.

General Settings

‘General Settings’ section lets you choose Spacing, Border Radius, Border Width, Border Color, Background Type to accordion.

Tab Style

‘Tab Style’ section lets you choose Typography, Padding and  Color, Border Type, Background Type, Box Shadow in normal, hover and active mode to the tab of accordion.

Content Style

‘Content Style’ section lets you choose Background Type, Text Color, Typography, Padding, Margin to the content of accordion.

Icon Style

‘Icon Style’ section lets you choose Icon Size, Color to the icon of accordion.

Final Outcome

By following these mentioned steps and a bit more modifying & styling, you can easily design your Advance Accordion as per your preference.


By using UBE Advanced Accordion, this is how you can easily put the spotlight on your significant contents & make them appealing to your visitors.

Getting stuck? Feel to Contact Our Support for further assistance.