Basic Example

Spoiler Title
Hidden content
Shortcode
[su_spoiler title="Spoiler Title" open="yes"]Hidden content[/su_spoiler]

Open by Default

Spoiler Title
Hidden content
Shortcode
[su_spoiler title="Spoiler Title" open="yes"]Hidden content[/su_spoiler]

Basic Styles

Default Style
Hidden content
Fancy Style
Hidden content
Simple Style
Hidden content
Shortcode
[su_spoiler title="Default Style" style="default"]Hidden content[/su_spoiler]
[su_spoiler title="Fancy Style" style="fancy"]Hidden content[/su_spoiler]
[su_spoiler title="Simple Style" style="simple"]Hidden content[/su_spoiler]

Modern Styles

Modern: Dark
Proactively envisioned multimedia based expertise and cross-media growth strategies. Seamlessly visualize quality intellectual capital without superior collaboration and idea-sharing. Holistically pontificate installed base portals after maintainable products.
Modern: Light
Phosfluorescently engage worldwide methodologies with web-enabled technology. Interactively coordinate proactive e-commerce via process-centric “outside the box” thinking. Completely pursue scalable customer service through sustainable potentialities.
Modern: Violet
Collaboratively administrate turnkey channels whereas virtual e-tailers. Objectively seize scalable metrics whereas proactive e-services. Seamlessly empower fully researched growth strategies and interoperable internal or “organic” sources.
Modern: Orange
Credibly innovate granular internal or “organic” sources whereas high standards in web-readiness. Energistically scale future-proof core competencies vis-a-vis impactful experiences. Dramatically synthesize integrated schemas with optimal networks.
Shortcode
[su_spoiler style="modern-dark" open="yes" title="Modern: Dark"] Proactively envisioned multimedia based expertise and cross-media growth strategies. Seamlessly visualize quality intellectual capital without superior collaboration and idea-sharing. Holistically pontificate installed base portals after maintainable products. [/su_spoiler]

[su_spoiler style="modern-light" open="yes" title="Modern: Light"] Phosfluorescently engage worldwide methodologies with web-enabled technology. Interactively coordinate proactive e-commerce via process-centric "outside the box" thinking. Completely pursue scalable customer service through sustainable potentialities. [/su_spoiler]

[su_spoiler style="modern-violet" open="yes" title="Modern: Violet"] Collaboratively administrate turnkey channels whereas virtual e-tailers. Objectively seize scalable metrics whereas proactive e-services. Seamlessly empower fully researched growth strategies and interoperable internal or "organic" sources. [/su_spoiler]

[su_spoiler style="modern-orange" open="yes" title="Modern: Orange"] Credibly innovate granular internal or "organic" sources whereas high standards in web-readiness. Energistically scale future-proof core competencies vis-a-vis impactful experiences. Dramatically synthesize integrated schemas with optimal networks. [/su_spoiler]

Glass Styles

Glass: Dark
Interactively procrastinate high-payoff content without backward-compatible data. Quickly cultivate optimal processes and tactical architectures. Completely iterate covalent strategic theme areas via accurate e-markets.
Glass: Light
Globally incubate standards compliant channels before scalable benefits. Quickly disseminate superior deliverables whereas web-enabled applications. Quickly drive clicks-and-mortar catalysts for change before vertical architectures.
Glass: Blue
Credibly reintermediate backend ideas for cross-platform models. Continually reintermediate integrated processes through technically sound intellectual capital. Holistically foster superior methodologies without market-driven best practices.
Glass: Green
Distinctively exploit optimal alignments for intuitive bandwidth. Quickly coordinate e-business applications through revolutionary catalysts for change. Seamlessly underwhelm optimal testing procedures whereas bricks-and-clicks processes.
Glass: Gold
Synergistically evolve 2.0 technologies rather than just in time initiatives. Quickly deploy strategic networks with compelling e-business. Credibly pontificate highly efficient manufactured products and enabled data.
Shortcode
[su_spoiler style="glass-dark" open="yes" title="Glass: Dark"] Interactively procrastinate high-payoff content without backward-compatible data. Quickly cultivate optimal processes and tactical architectures. Completely iterate covalent strategic theme areas via accurate e-markets. [/su_spoiler]

[su_spoiler style="glass-light" open="yes" title="Glass: Light"] Globally incubate standards compliant channels before scalable benefits. Quickly disseminate superior deliverables whereas web-enabled applications. Quickly drive clicks-and-mortar catalysts for change before vertical architectures. [/su_spoiler]

[su_spoiler style="glass-blue" open="yes" title="Glass: Blue"] Credibly reintermediate backend ideas for cross-platform models. Continually reintermediate integrated processes through technically sound intellectual capital. Holistically foster superior methodologies without market-driven best practices. [/su_spoiler]

[su_spoiler style="glass-green" open="yes" title="Glass: Green"] Distinctively exploit optimal alignments for intuitive bandwidth. Quickly coordinate e-business applications through revolutionary catalysts for change. Seamlessly underwhelm optimal testing procedures whereas bricks-and-clicks processes. [/su_spoiler]

[su_spoiler style="glass-gold" open="yes" title="Glass: Gold"] Synergistically evolve 2.0 technologies rather than just in time initiatives. Quickly deploy strategic networks with compelling e-business. Credibly pontificate highly efficient manufactured products and enabled data. [/su_spoiler]

More Styles

Carbon
Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to derive convergence on cross-platform integration.
Sharp
Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.
Grid
Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions.
Wood
Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service.
Fabric
Objectively innovate empowered manufactured products whereas parallel platforms. Holisticly predominate extensible testing procedures for reliable supply chains. Dramatically engage top-line web services vis-a-vis cutting-edge deliverables.
Shortcode
[su_spoiler style="carbon" open="yes" title="Carbon"] Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to derive convergence on cross-platform integration. [/su_spoiler]

[su_spoiler style="sharp" open="yes" title="Sharp"] Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI. [/su_spoiler]

[su_spoiler style="grid" open="yes" title="Grid"] Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions. [/su_spoiler]

[su_spoiler style="wood" open="yes" title="Wood"] Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service. [/su_spoiler]

[su_spoiler style="fabric" open="yes" title="Fabric"] Objectively innovate empowered manufactured products whereas parallel platforms. Holisticly predominate extensible testing procedures for reliable supply chains. Dramatically engage top-line web services vis-a-vis cutting-edge deliverables. [/su_spoiler]

Nested Spoilers

Parent Spoiler
Nested Spoiler
Hidden content
Nested Spoiler
Hidden content
Shortcode
[su_spoiler title="Parent Spoiler" style="fancy"]
[_su_spoiler title="Nested Spoiler" style="fancy"]
[__su_spoiler title="Second-level Nested Spoiler" style="fancy"]Hidden content[__/su_spoiler]
[_/su_spoiler]
[_su_spoiler title="Nested Spoiler" style="fancy"]Hidden content[_/su_spoiler]
[/su_spoiler]

Accordion – Single item open at a time

Spoiler Title
Hidden content
Spoiler Title
Hidden content
Spoiler Title
Hidden content
Shortcode
[su_accordion]
[su_spoiler title="Spoiler Title" open="yes"]Hidden content[/su_spoiler]
[su_spoiler title="Spoiler Title" open="no"]Hidden content[/su_spoiler]
[su_spoiler title="Spoiler Title" open="no"]Hidden content[/su_spoiler]
[/su_accordion]

Various Icons

icon=plus
Hidden Content
icon=plus-circle
Hidden Content
icon=plus-square-1
Hidden Content
icon=plus-square-2
Hidden Content
icon=arrow
Hidden Content
icon=arrow-circle-1
Hidden Content
icon=arrow-circle-2
Hidden Content
icon=chevron
Hidden Content
icon=chevron-circle
Hidden Content
icon=caret
Hidden Content
icon=caret-square
Hidden Content
icon=folder-1
Hidden Content
icon=folder-2
Hidden Content
Shortcode
[su_spoiler title="icon=plus" icon="plus"] Hidden Content [/su_spoiler]
[su_spoiler title="icon=plus-circle" icon="plus-circle"] Hidden Content [/su_spoiler]
[su_spoiler title="icon=plus-square-1" icon="plus-square-1"] Hidden Content [/su_spoiler]
[su_spoiler title="icon=plus-square-2" icon="plus-square-2"] Hidden Content [/su_spoiler]
[su_spoiler title="icon=arrow" icon="arrow"] Hidden Content [/su_spoiler]
[su_spoiler title="icon=arrow-circle-1" icon="arrow-circle-1"] Hidden Content [/su_spoiler]
[su_spoiler title="icon=arrow-circle-2" icon="arrow-circle-2"] Hidden Content [/su_spoiler]
[su_spoiler title="icon=chevron" icon="chevron"] Hidden Content [/su_spoiler]
[su_spoiler title="icon=chevron-circle" icon="chevron-circle"] Hidden Content [/su_spoiler]
[su_spoiler title="icon=caret" icon="caret"] Hidden Content [/su_spoiler]
[su_spoiler title="icon=caret-square" icon="caret-square"] Hidden Content [/su_spoiler]
[su_spoiler title="icon=folder-1" icon="folder-1"] Hidden Content [/su_spoiler]
[su_spoiler title="icon=folder-2" icon="folder-2"] Hidden Content [/su_spoiler]