A jQuery plugin for accessible content toggles.
npm install peekaboo-toggleA jQuery plugin for showing and hiding content in an accessible way.
- Flexible for most cases where you need to show/hide stuff, such as menus,
accordions, tabs.
- Simple by default, and customizable for more complex uses.
- Adds ARIA attributes and a element (when necessary) for keyboard and screen reader accessibility.
With npm:
``bash`
npm install --save peekaboo-toggle
With unpkg:
`html`
By default, a peekaboo toggle will show/hide the next element in the DOM. Let's
say we have a button that should show/hide a menu when clicked:
`html`
We bind peekaboo to the button like this:
`js
// If you're using npm
import $ from 'jquery';
import peekaboo from 'peekaboo-toggle';
$('.peekaboo').peekaboo();
`
Peekaboo will add the [hidden attribute] to the
`css`
[hidden] {
display: none !important;
}
Peekaboo will add the aria-expanded and aria-controls attributes to the
`html`
You can specify the ID of the content you'd like to toggle using the data-toggle-target or aria-controls attributes. This is useful if the content doesn't immediately follow the toggle button in your document.
`html`We have many beautiful things on our menus.
$3
The following options are available, shown with the default values:
`javascript
$('.peekaboo').peekaboo({
// Prefix for generated IDs and namespace the event listener
namespace: 'peekaboo',
// Class name(s) added to generated button (if applicable)
buttonClassname: 'button--transparent',
// Called after the event.
// Receives the event object as an argument.
callback: () => {},
// When true, the click event will be removed
// If a