Accordion

There are Additional Skins available for this shortcode.

Single Spoiler

Spoiler title
Hidden content

Multiple Spoilers wrapped with Accordion

Spoiler title
Hidden content
Spoiler title
Hidden content
Spoiler title
Hidden content
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

  1. Description
  2. Options
    1. [su_accordion] – container
    2. [su_spoiler] – single spoiler
  3. 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

[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 –