THE WEEKEND SALE

GET ADD-ONS BUNDLE WITH 34% OFF

ONLY 14 HOURS LEFT

GET ADD-ONS BUNDLE – FROM ONLY $39

DISCOUNT CODE APPLIED AUTOMATICALLY

Accordion

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

  1. Description
  2. Options
    1. [su_accordion] – container
    2. [su_spoiler] – single spoiler
  3. If accordion 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 the block title will be clicked. You can specify different icons or even use different styles for each spoiler.

Options

[su_accordion] – container

classAdditional CSS class name(s) separated by space(s)

[su_spoiler] – single spoiler

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 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.

Helpful?
🤝 Thank you!