Show/Hide Content

JS file

This interaction allows user to toggle hidden on the page. It uses a one-to-one relationship to the toggle button and the content, meaning it does not currently support toggling multiple panes of content at the same time.

<button type="button" aria-controls="the_content" aria-expanded="false" class="sba-c-button sba-js-visibility-trigger">Toggle content</button>
<p id="the_content" hidden>I am the content!</p>

Guidance

  • The button must have attributes for aria-controls and aria-expanded, as well as the class name sba-js-visibility-trigger.
  • The content must have an id that matches the toggle button’s aria-controls attribute.
  • The content must also have a binary hidden attribute that corresponds to the toggle button’s aria-expanded attribute

When to use

  • When content needs to be easily shown or hidden
  • Navigation dropdowns
  • Nonessential content

When to consider something else

  • You need to toggle multiple content areas simultaneously (example, show one and hide another)
  • Content to be toggled applies to most users (in this case, do not hide this content OR make the default state visible)
  • An accordion would be a better application

Accessibility considerations

  • Consider using <button type="button"> for the toggle