Simple Accessible Spoilers

Create fully accessible content spoilers or accordions with a shortcode.

1. Fully accessible to screen reader users
2. Creates a flexible spoiler shortcode
3. Define groups of accordions to close open accordions when another in the same group is opened.
4. Override design in theme CSS files

Sample Code

[spoiler title="Sample Code" initial_state="expanded" tag="h2" group="a"]
Include content here
[/spoiler]

Attributes

title: should include the clickable text to be displayed in your accordion
initial_state: values include collapsed or expanded, default to “collapsed”
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.
tag: values include any typical html tag but a heading tag should be used for accessibility, defaults to H2

Screenshots

Categories