Accessible Expand/Collapse Plugin - accessible-hide-show-aria
File Size: | 7.64 KB |
---|---|
Views Total: | 120 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.