Progressively Enhanced Content Toggle Plugin – ARIA Toggle Blocks

Preview:

Description:

ARIA Toggle Blocks is an accessible, progressively enhanced content toggle library to show and hide content sections with toggle buttons.

How to use it:

Load the style sheet ‘aria.toggle.css’ and JavaScript file ‘aria.toggle.js’ in the page.

<link rel="stylesheet" href="aria.toggle.css">
<script src="aria.toggle.js"></script>

Add the data-action="aria-toggle" attribute to the togglable content and done.

<div data-action="aria-toggle"
  class="atblock">
  <h3 class="atblock__trigger">
    <a href="#demo">
      Example
    </a>
  </h3>
  <div id="demo" class="atblock__panel">
    <p>
      content that is toggled
    </p>
  </div>
</div>

The library also supports nested togglable content.

<div data-action="aria-toggle"
  class="atblock">
  <h3 class="atblock__trigger">
    <span>Parent Toggle</span>
  </h3>
  <div class="atblock__panel">
    <p style="margin-bottom: 12px">
      Content that is toggled
    </p>
    <div data-action="aria-toggle"
      data-expanded
      class="atblock">
      <h3 class="atblock__trigger">
        <span>Nested Toggle</span>
      </h3>
      <div class="atblock__panel">
        <p>
          Maybe you should be using an accordion instead?
        </p>
      </div>
    </div>
  </div>
</div>