Accordion Shortcode

Last Updated on

The accordion shortcode allows you to add a series of contents to sections with headers. By adding content into collapsible sections, you can save a lot of space on a page or post.

It consists of two essential parts: the accordion and accordion section. The Accordion acts as a container for all of the sections. The accordion section is a slot in the accordion where you are able to add simple shortcodes like Images and Text.

To see the accordion shortcode in action, check out the demo page.

Accordion Shortcode - demo

In this article

Displaying the Accordion Shortcode

To add an Accordion shortcode to your page or post:

Add a new page or edit an existing page.
From Visual Composer Screen, click + icon

Accordion Shortcode - Visual Composer section

In Add Element pop-up screen, search for Accordion and click on it to be added to the page.

Accordion Shortcode - add element

When the shortcode is added, a new pop-up screen called Accordion Settings opens. It gives you the ability to configure the shortcode settings.

Accordion Shortcode - accordion settings

Click Save Changes and publish or update the page to check the result.

Configuring the Style

There are 2 subjects regarding the Accordion styling. First one is the Accordion variation which let’s you choose between a fancy and simple style, and the second one is general styling like Accordion’s color.

Accordion Style (variation)

To change the Accordion style, click on Edit Accordion button.

Accordion Shortcode - edit accordion


From Style option, select one of the available variations.

Accordion Shortcode - accordion style

Accordion Color

Accordion Shortcode has one color option. This option can also be found in Accordion settings. To change the accordion container background color, click on Edit Accordion button. You can choose your color from color selection tool.

Accordion Shortcode - accordion color

Configuring Behavior of the Accordion

There are two behaviors for the accordion functionality: One Toggle Open at a Time and Multiple Toggles Open at a Time. These options toggle the accordion sections (items).

To choose the behavior of the accordion:

Click on Edit Accordion button.

Accordion Shortcode - edit accordion

From Action Style option, select one of the options.

Accordion Shortcode - action style

The Differences Between Two Accordion Behaviors

  • When you select One Toggle Open at a Time option, you can see only one open accordion section (item) at a time. Once another section is selected, the previous one will be collapsed.
Note: Please note that in this option one section will always be open.
  • When you select Multiple Toggles Open at a Time option, you can have multiple accordion sections (items) open at a time. By opening one section, the previous one won’t be collapsed.

Specify Which Accordion Section to be Open by Default When the Page Loads

This option can be found in Accordion Settings just like the previous ones.

Accordion Shortcode - accordion settings

This value is zero based, therefore zero is the first item, 1 is second item and so on. Setting the Initial Index option to -1 makes all accordion sections (items) closed on page load.

Note: This option works when you have chosen One Toggle Open At A Time.

Making the Accordion Mobile Friendly

This option can be found in Accordion Settings pop-up just like the previous ones.

You can disable accordion shortcode in mobile view and show all the content normally as text stacking up. This is a recommended approach as some mobile phone browsers have difficulty in displaying accordions and all the animations correctly.

Accordion Shortcode - mobile friendly

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket