There are Additional Skins available for this shortcode.
Single Spoiler
Spoiler title
Hidden content
<strong>Single Spoiler</strong>
[su_spoiler title="Spoiler title" open="yes" style="fancy"] Hidden content [/su_spoiler]
Multiple Spoilers wrapped with Accordion
Spoiler title
Hidden content
Spoiler title
Hidden content
Spoiler title
Hidden content
<strong>Multiple Spoilers wrapped with Accordion</strong>
[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]
Table of contents
Description Options [su_accordion] – container [su_spoiler] – single spoiler If accordion doesn't work Related articles
Description
This shortcode allows you to create blocks with hidden content - spoilers (toggles). Hidden content will be shown when the block title will be clicked. You can specify different icons or even use different styles for each spoiler.
Options
[su_accordion] – container
class Additional CSS class name(s) separated by space(s)
[su_spoiler] – single spoiler
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 accordion doesn't work
If an accordion 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