The Accordion Element


Much like the Tabs Element, the Accordion Element is a great option if you want to display a lot of content in a small space.


When we drag and drop the Accordion Element on to the workspace we are given the default version.

accordion website builder

Again, similar to the Tabs Element we can make some changes to the Text by double or triple-clicking on the text and making changes, just as we would with any text. We can do this in the Panel Title area or the Panel Content area.

We can simply and easily Add New Panels by clicking the ‘+’ button in the top left-hand corner of the region.
accordion website builder

However, we really need to add some styling. Click the Settings Cog icon, and create a custom pre-set. Under Content Area Colours we can choose the background colour of our content area. We also have the option to add a Border.

We can change the Header Background by altering the colour in Header BG.

Under Tab Label Typography we can make changes to the Panel Typeface, Weight/Style, Size and so on in a similar manner to how we would any other typography changes.

In Hover mode we can make some changes to animate the Tabs or make them pop a bit. The simplest way to do this is to alter the Border, Colour, Typography and Animate State Changes properties, press OK to save, and then observe the changes to the Tabs as you hover the mouse over them. There really are no hard and fast rules with this feature, just experiment and decide what is right for you and your website.

accordion website builder

Using a similar method, we can also highlight the Active Tab. Click the Active Button and make some changes to the Border, Colour and other setting properties, press Ok to save, and observe your changes. As with the Hover mode, you will need to experiment to find the styling that is best suited your website project.


It comes with a basic pre-set style, depending on the default theme you’re using, but you can always create your own custom present style in the settings.