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.

Felix Triller

<p>wpSpoiler is a plugin for WordPress, designed to protect the reader against spoilers, for example in book or filmreviews.<br />
The spoiler text is hidden by default and shows up if wished.</p>
<p>To mark a text as spoiler, enclose the passage with [spoiler] and [/spoiler].</p>
<p>Features</p>
<ul>
<li>Very fast, less code</li>
<li>Customizeable with CSS</li>
</ul>
<p>A german version of this page can be found <a href="http://felixtriller.de/projekte/wpspoiler/" title="felixtriller.de" rel="nofollow ugc">here</a>.<br />
Eine deutsche Version dieser Seite ist <a href="http://felixtriller.de/projekte/wpspoiler/" title="felixtriller.de" rel="nofollow ugc">hier</a> zu finden.</p>
<h3>Usage</h3>
<p>To mark a text as spoiler, enclose the passage with [spoiler] and [/spoiler].<br />
Example:<br />
    Spoiler: [spoiler]Bruce Willis is a ghost![/spoiler]</p>
<p>The result is shown in the screenshot section.</p>
<h3>Customize</h3>
<p>The language of the link text has to be changed in the pluginfile itself: <strong>wpSpoiler.php</strong>.</p>
<p>CSS can be used to style the spoiler box and the links. The spoiler-div is identified by the classname <code>spoiler_div</code>.<br />
The link’s class is <code>spoiler_link_show</code> or <code>spoiler_link_hide</code>, depending on the current state.</p>
<p>An example stylesheet code snippet:</p>
<pre><code>/* wpSpoiler */
a.spoiler_link_show,
a.spoiler_link_hide {
    background-repeat:      no-repeat;
    background-position:    left center;
    padding-left:           18px;
}
a.spoiler_link_show {
    background-image:       url(images/add.png);
}
a.spoiler_link_hide {
    background-image:       url(images/delete.png);
}
div.spoiler_div {
    background-color:       #ddd;
    margin-top:             -10px;
    padding:                2px;
}
</code></pre>


wpSpoiler

A plugin designed to protect the reader against spoilers.

Simple Accessible Spoilers vs wpSpoiler