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.
Displaying the Accordion Shortcode
To add an Accordion shortcode to your page or post:
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)
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.
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:
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.
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.
