THE WEEKEND SALE

GET ADD-ONS BUNDLE WITH 34% OFF

ONLY 13 HOURS LEFT

GET ADD-ONS BUNDLE – FROM ONLY $39

DISCOUNT CODE APPLIED AUTOMATICALLY

Spoiler

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

  1. Description
  2. Options
  3. If spoiler doesn’t work
  4. 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

titleText in spoiler title

Default value: Spoiler title
openIs spoiler content visible by default

Possible values: yes or no

Default value: no
styleSpoiler style

Possible 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
iconIcons for spoiler

Possible 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
anchorYou 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_urlThis option specifies whether an anchor will be added to page URL after clicking the spoiler

Possible values: yes or no

Default value: no
scroll_offsetThis 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
classAdditional 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.

Helpful?
🤝 Thank you!