There are Additional Skins available for this shortcode.
Get the code
<strong>Single Spoiler</strong> [su_spoiler title="Spoiler title" open="yes" style="fancy"] Hidden content [/su_spoiler] <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
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 name | Possible values | Default 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 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 – |