What is Toggle?

Toggle is a lightweight JavaScript module that provides simple toggle interaction functionality using the accessible aria-expanded HTML attribute. Toggle is pure JavaScript with no dependencies, and can be easily implemented into any workflow or framework.

Getting Started

The easiest way to start using Toggle is to import via npm:

npm i toggle-js

Once installed, use Toggle in your scripts:

import Toggle from 'toggle-js'

let toggle = new Toggle()

Alternatively, you may download the minified script and add it to your solution manually.

Creating Toggles

Once installed, create Toggle instances using new Toggle():

let toggle = new Toggle()

Toggling

Once created, toggle targets (by default any element with a class of toggle) gain an aria-expanded attribute, indicating the expanded state (true or false). Adjacent toggle buttons (by default any <button>) will toggle the expanded state when clicked.

Presentation

Toggle alters the aria-expanded attribute of the toggle target and may add or remove classes from toggle targets, buttons, and parents. You must handle the presentation of these states in your stylesheet. For example:

[aria-expanded="false"] {
  display: none;
}

Configuration

You may pass in a configuration object when instantiating new Toggles. All configuration options are fully documented in options.js. A succinct list of configuration options and their default values are listed below:

let toggle = new Toggle({
  blur: false,
  blurFilter: '.toggle, .toggle *, button, button *',
  buttonClass: null,
  buttonClassExpanded: null,
  buttonContent: 'Toggle',
  buttonSelector: 'button',
  createButtons: false,
  parentClass: null,
  parentClassExpanded: null,
  scoped: true,
  single: false,
  singleSibling: false,
  targetClass: null,
  targetClassExpanded: null,
  targetSelector: '.toggle'
})

Examples

See Toggle Recipes for common examples of Toggle configuration.