Accessible Expand/Collapse Plugin - accessible-hide-show-aria

Most of the content toggle plugins available on the Internet are not accessible for people with disabilities, especially for those who rely on screen readers. 

This is a lightweight jQuery plugin that provides a fully accessible content toggle (show/hide) interface using ARIA attributes. It offers a visual hint for when your element is expanded or collapsed, which is especially important when using keyboard navigation and screen readers.

How to use it:

1. Load the jquery-accessible-hide-show-aria.js script after jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery-accessible-hide-show-aria.js"></script>

2. Add the content to be expanded and collapsed next to the toggle element as follows:

<h2 class="js-expandmore">
  Toggle Element
</h2> 
<div class="js-to_expand">
  ... Content To Expand/Collapse
</div>

3. Hide the content when collapsed:

.js-to_expand[aria-hidden=true],
.js-to_expand[data-hidden=true] {
  display: none;
}

4. Add a visual indicator to the toggle element. OPTIONAL.

.expandmore__button[aria-expanded=false] > .expandmore__symbol:before,
.expandmore__button[data-expanded=false] > .expandmore__symbol:before {
  content : '+ ';
}

.expandmore__button[aria-expanded=true] > .expandmore__symbol:before,
.expandmore__button[data-expanded=true] > .expandmore__symbol:before {
  content : '− ';
}

5. Customize the expand/collapse text.

var expand_all_text = 'Expand All',
    collapse_all_text = 'Collapse All';

---

This awesome jQuery plugin is developed by nico3333fr. For more Advanced Usages, please check the demo page or visit the official website.