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
title
Text in spoiler title
Any text value Spoiler title
open
Is spoiler content visible by default
yes or no no
style
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)
default
icon
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)
plus
anchor
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 http://example.com/page-url#Hello. This spoiler will be open and scrolled in
Any text value

none

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

none