This shortcode allows you to create blocks with hidden content – spoilers (toggles). Hidden content will be shown when block title will be clicked. You can specify different icons or even use different styles for each spoiler.

Spoiler title
Hidden content
Spoiler title
Hidden content
Spoiler title
Hidden content
[su_spoiler title="Spoiler title" style="default"]Hidden content[/su_spoiler]

[su_spoiler title="Spoiler title" style="fancy" icon="plus-circle"]Hidden content[/su_spoiler]

[su_spoiler title="Spoiler title" style="simple"]Hidden content[/su_spoiler]
Option name Possible values Default value
Text in spoiler title
Any text value Spoiler title
Is spoiler content visible by default
yes or no no
Choose style for this spoiler
default (Default)
fancy (Fancy)
simple (Simple)
carbon (Carbon)
sharp (Sharp)
grid (Grid)
wood (Wood)
fabric (Fabric)
modern-dark (Modern: Dark)
modern-light (Modern: Light)
modern-violet (Modern: Violet)
modern-orange (Modern: Orange)
glass-dark (Glass: Dark)
glass-light (Glass: Light)
glass-blue (Glass: Blue)
glass-green (Glass: Green)
glass-gold (Glass: Gold)
Icons for spoiler
plus (Plus)
plus-circle (Plus circle)
plus-square-1 (Plus square 1)
plus-square-2 (Plus square 2)
arrow (Arrow)
arrow-circle-1 (Arrow circle 1)
arrow-circle-2 (Arrow circle 2)
chevron (Chevron)
chevron-circle (Chevron circle)
caret (Caret)
caret-square (Caret square)
folder-1 (Folder 1)
folder-2 (Folder 2)
You can use unique anchor for this spoiler to access it with hash in page url. For example: type here Hello and then use url like This spoiler will be open and scrolled in
Any text value


Additional CSS class name(s) separated by space(s)
CSS class name(s) separated by space(s)