<div class="text-center">
  <button aria-controls="toggle-target" aria-expanded="false" class="btn mb-3" data-js="toggle" type="button">Toggle</button>
  <div aria-hidden="true" class="p-3 bg-base-white hidden" id="toggle-target">
    <p>Targeted toggle element. <a href='#' tabindex='-1'>A focusable child element</a>.</p>
  </div>
</div>

The Toggle Utility is a simple JavaScript ES module that will show and hide and hide an element and its contents visibly and virtually from screen readers. The utility can be used with <button> elements, <a> tags, and supports a few additional common aria attributes for screen reader support. It is made available through the Patterns Scripts library included as a dependency of the NYCO Patterns. View the documentation for importing the ES module into project scripts and additional usage details.

Toggle Usage

To instantiate toggling through the global NYCO Patterns script use the following code:

var nyco = new NYCO();

nyco.toggle();

Buttons

<button> elements with the data-js="toggle" attribute will toggle other elements by ID using the selector in the aria-controls attribute (without the hash # sign).

Anchor Links

<a> tags with the data-js="toggle" attribute will toggle, scroll to, and shift focus to other elements by ID using selector in the href attribute (must include the hash # sign).

ES Module

This method is a wrapper around the Patterns Scripts toggle utility which is included as a dependency of this project. The utility can be imported as an ES module and instantiated separately.

import Toggle from '@nycopportunity/pttrn-scripts/src/toggle/toggle';

new Toggle();