There are Additional Skins available for this shortcode.
Spoiler title
Hidden content
Spoiler title
Hidden content
Spoiler title
Hidden content
Spoiler title
Hidden content
Spoiler title
Hidden content
[su_spoiler open="yes" title="Spoiler title" style="default"] Hidden content [/su_spoiler]
[su_spoiler open="yes" title="Spoiler title" style="fancy" icon="plus-circle"] Hidden content [/su_spoiler]
[su_spoiler open="yes" title="Spoiler title" style="simple"] Hidden content [/su_spoiler]
[su_spoiler open="yes" title="Spoiler title" style="modern-light"] Hidden content [/su_spoiler]
[su_spoiler open="yes" title="Spoiler title" style="wood"] Hidden content [/su_spoiler]
Table of contents
Description Options If spoiler doesn’t work Related articles
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
title Text in spoiler titleDefault value: Spoiler title
open Is spoiler content visible by defaultPossible values: yes
or no
Default value: no
style Spoiler stylePossible values: default
fancy
simple
carbon
sharp
grid
wood
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 value: default
icon Icons for spoilerPossible values: plus
plus-circle
(Plus circle)plus-square-1
(Plus square 1)plus-square-2
(Plus square 2)arrow
arrow-circle-1
(Arrow circle 1)arrow-circle-2
(Arrow circle 2)chevron
chevron-circle
(Chevron circle)caret
caret-square
(Caret square)folder-1
(Folder 1)folder-2
(Folder 2)Default value: plus
anchor You can use a unique anchor for a spoiler to access it with hash in page URL. For example: use the word Hello and then use a URL like http://example.com/page-url#Hello. This spoiler will be opened and scrolled in anchor_in_url This option specifies whether an anchor will be added to page URL after clicking the spoilerPossible values: yes
or no
Default value: no
scroll_offset This option defines the top offset when the element is scrolled in. Can be useful along with the fixed site header.Possible values: number from 0
to 2000
Default value: 0
class Additional CSS class name(s) separated by space(s)
If spoiler doesn’t work
If a spoiler doesn’t work, isn’t collapsing or expanding, chances are you have a JavaScript error on your page. Read this to learn how to fix it.
Related articles