Spoilers Accordion

The Spoilers Accordion shortcode for WordPress can be used to display content in an interactive manner included in a list of spoilers, offering a smooth visual accordion transition when going through each one of them. Check below for example implementations and shortcode documentation:

Spoilers Accordion Examples

Spoiler 1
First spoiler content.
Second spoiler content.
Third spoiler content.
You may click on any of the spoilers above to open them, and when this is done, the other opened spoiler will close. This is the accordion effect.

Spoilers Accordion Shortcodes

Spoilers Accordion Shortcode
[x3m-spoilers]
[x3m-spoiler title="Spoiler 1" open="yes" background="#f5f5f5" textcolor="black" radius="10px"]
First spoiler content.
[/x3m-spoiler]
[x3m-spoiler title="Spoiler 2" open="no" background="#f5f5f5" textcolor="black" radius="10px"]
Second spoiler content.
[/x3m-spoiler]
[x3m-spoiler title="Spoiler 3" open="no" background="#f5f5f5" textcolor="black" radius="10px"]
Third spoiler content.
[/x3m-spoiler]
[/x3m-spoilers]
The shortcode can be used to display a list of spoilers, each with its own message. One spoiler will be set to open, the other will be closed. When one of the spoilers is opened, any other will in turn close, creating the accordion effect. The Spoilers Accordion can be used with ease for an FAQ section, listing visible Questions with the answers available in each spoiler. Above example displays a light-grey 3 spoilers accordion.

Spoilers Accordion Documentation

Here are the shortcode option settings available for Spoilers Accordion:

Shortcode Settings Details
title=”Spoiler Title” This is used to set title on each individual spoiler.
open=”no” This is used to set spoiler to be open or not on page load. Available options:
– “no” for having the spoiler closed
– “yes” for having the spoiler open
background=”#f5f5f5″ This is used to set the background color of the spoiler container.

Color names or HEX color codes can be used to set the desired color.

textcolor=”black” This is used to set the text color for the spoiler title.

Color names or HEX color codes can be used to set the desired color.

radius=”10″ This is used to set corners’ radius of the spoiler container, making them rounder or sharper.