<h2>Basic example</h2>

[%su_box title="This is a box with nested spoilers"]
	[%su_spoiler title="Spoiler title"] Spoiler content [/%su_spoiler]
	[%su_spoiler title="Spoiler title"] Spoiler content [/%su_spoiler]
	[%su_spoiler title="Spoiler title"] Spoiler content [/%su_spoiler]
[/%su_box]

-----

<h2>The same nested shortcodes</h2>

[%su_spoiler title="Click me to see nested spoilers" style="fancy"]
	[_%su_spoiler title="Spoiler title"] Spoiler content [_/%su_spoiler]
	[_%su_spoiler title="Spoiler title"] Spoiler content [_/%su_spoiler]
	[_%su_spoiler title="Spoiler title"] Spoiler content [_/%su_spoiler]
[/%su_spoiler]

-----

<h2>The same nested shortcodes mixed with other shortcodes</h2>

[%su_spoiler title="Click me to see nested accordion" style="fancy"]
	[%su_accordion]
		[_%su_spoiler title="Spoiler title"] Spoiler content [_/%su_spoiler]
		[_%su_spoiler title="Spoiler title"] Spoiler content [_/%su_spoiler]
		[_%su_spoiler title="Spoiler title"] Spoiler content [_/%su_spoiler]
	[/%su_accordion]
[/%su_spoiler]

-----

<h2>Shortcodes inside of attributes</h2>

To use shortcodes inside of attributes you need to replace square brackets with <code>{</code> and <code>}</code>. Open code to see example

[%su_button url="{shortcode attribute='value'}"] Button [/%su_button]