Progressively Enhanced Content Toggle Plugin – ARIA Toggle Blocks

Category: Javascript | October 21, 2018
Author: scottaohara
Views Total: 25 views
Official Page: Go to website
Last Update: October 21, 2018
License: MIT

Preview:

Progressively Enhanced Content Toggle Plugin – ARIA Toggle Blocks

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>

You Might Be Interested In:


Leave a Reply