seshelby

<p>Create fully accessible content spoilers or accordions with a shortcode.</p>
<ol>
<li>Fully accessible to screen reader users</li>
<li>Creates a flexible spoiler shortcode</li>
<li>Define groups of accordions to close open accordions when another in the same group is opened.</li>
<li>Override design in theme CSS files</li>
</ol>
<h3>Sample Code</h3>
<p><code>[spoiler title="Sample Code" initial_state="expanded" tag="h2" group="a"]<br />
Include content here<br />
[/spoiler]</code></p>
<h3>Attributes</h3>
<p>title: should include the clickable text to be displayed in your accordion<br />
initial_state: values include collapsed or expanded, default to “collapsed”<br />
group: any alphanumeric value. used to define a group of accordions. when one accordion is opened all other items in the group will be closed.<br />
tag: values include any typical html tag but a heading tag should be used for accessibility, defaults to H2</p>


Simple Accessible Spoilers

Create fully accessible content spoilers or accordions with a shortcode.

Cheon, YoungMin

<p>New version of <a href="http://082net.com/tag/aj-spoiler/" rel="nofollow ugc">Ajax Spoiler</a> plugin renamed to ‘Advanced Spoiler’.</p>
<p>Show or hide contents(text, image etc.) with animated effects wrapped by spoiler markup tag([spoiler][/spoiler]).</p>
<ul>
<li>Animate effects: appear, blind, slide, apblind(appear + blind), phase, simple(no animate)</li>
<li>Supports TinyMCE button and quicktags button</li>
<li>Provides option page for default effect, show text, hide text, animate speed, nested spoilers.</li>
<li>Supports ‘Simple Mode’: no aniated effects and just simple javascript.</li>
</ul>
<h4>Included Translations</h4>
<ul>
<li>Korean translation by me 😉</li>
<li>Russian translation by <a href="http://www.fatcow.com" rel="nofollow ugc">FatCow</a> – Thanks!</li>
</ul>
<h3>Usage</h3>
<p>Enclose any paragraphs or passages with <code>[spoiler]</code> and <code>[/spoiler]</code></p>
<p>e.g.</p>
<ul>
<li>simple: <code>[spoiler] spoiler content... [/spoiler]</code></li>
<li>options: <code>[spoiler effect="blind" show="Show me" hide="Hide me"] spoiler content... [/spoiler]</code></li>
</ul>


Advanced Spoiler

Show or hide contents(text, image etc.) with animated effects wrapped by spoiler markup tag([spoiler][/spoiler]).

Simple Accessible Spoilers vs Advanced Spoiler