Spoiler title
Hidden content
Spoiler title
Hidden content
Spoiler title
Hidden content
[su_accordion]
[su_spoiler title="Spoiler title" open="yes" style="fancy"]Hidden content[/su_spoiler]
[su_spoiler title="Spoiler title" style="fancy"]Hidden content[/su_spoiler]
[su_spoiler title="Spoiler title" style="fancy"]Hidden content[/su_spoiler]
[/su_accordion]

There are Additional Skins available for this shortcode.

Description

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.

Options

[su_accordion] – container

Option namePossible valuesDefault value
class
Additional CSS class name(s) separated by space(s)
CSS class name(s) separated by space(s)– none –

[su_spoiler] – single spoiler

Option namePossible valuesDefault value
title
Text in spoiler title
Any text valueSpoiler title
open
Is spoiler content visible by default
yes or nono
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 –