A simple, yet fairly complex (and accessible) hide/show toggle behavior

View the Pen: http://codepen.io/timwright12/pen/yerzqG

<button
	type="button"
	data-action="hide-show"
	data-text="Hide"
	data-class="is-hidden"
	aria-controls="your-target-id"
	aria-live="polite"
	aria-expanded="false">
	Show
</button>

<div id="your-target-id" class="is-hidden"></div>

This is standard HTML to make a button be a button.

This attribute calls the plugin on this element.

This is the text you want to replace the current button text when the toggle happens, it is optional.

If you're using a class to hide content, add that here otherwise the plugin will just use JavaScript, this is optional

This tells the plugin which div to target for the hide-show. It is the ID attribute for the element.

If you're updating the button text iwht data-text, you'll need this to alert screen readers.

The default state of the target area, false = closed, true = open

This could have all the say attributes as the button toggle, but some are a bit redundant

<a
	href="#your-target-id-2"
	data-action="hide-show"
	data-text="Hide"
	data-class="is-hidden"
	aria-live="polite">
	Show
</a>

<div id="your-target-id-2" class="is-hidden"></div>