Accordion Shortcode

Updated on June 18, 2019

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


Displaying the Accordion Shortcode

To add an Accordion shortcode to your page or post:

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

Accordion Shortcode - Visual Composer section

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

Accordion Shortcode - add element

4When 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

5Click 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)

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

Accordion Shortcode - edit accordion

 

2From 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:

1Click on Edit Accordion button.

Accordion Shortcode - edit accordion

2From 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.
  • 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.


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

Did this answer your question?