Accordion

This shortcode has additional styles available in Shortcodes Ultimate Pro

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