There are Additional Skins available for this shortcode.

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]

Table of contents

  1. Description
  2. Options
  3. Related articles


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.


Option namePossible valuesDefault value
Text in spoiler title
Any text valueSpoiler title
Is spoiler content visible by default
yes or nono
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– none –
Additional CSS class name(s) separated by space(s)
CSS class name(s) separated by space(s)– none –