Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 

README.md

jQuery accessible hide/show using ARIA

A simple jQuery code to provide accessible hide/show system using ARIA.

Full demo is here: https://a11y.nicolas-hoffmann.net/hide-show/

This simple script transforms this simple piece of code:

    <h2 class="js-expandmore">
    	Content 1
    </h2> 
    <div class="js-to_expand">here a wonderful hidden content about content 1</div>
    <br /><br /><br />
    <h2 class="js-expandmore">
    	Content 2
    </h2> 
    <div class="js-to_expand is-opened">Lorem <a href="#">fdsfdsfds</a> ipsum about content 2 (opened by default)</div>
    <br /><br /><br />
    <h2 class="js-expandmore">Content 3 </h2>
    <div class="js-to_expand">here a wonderful hidden content about content 3</div>

into shiny accessible hide/show by adding ARIA attributes.

Keyboard navigation is supported, based on ARIA DP (http://heydonworks.com/practical_aria_examples/#progressive-collapsibles && http://www.oaa-accessibility.org/examplep/tabpanel1/):

Requirements

  • jQuery (others smaller libraries should be ok, but didn't test for the moment)
  • a small piece of CSS .js-to_expand[data-hidden=true] { display: none; }
  • or you may use npm i jquery-accessible-hide-show-aria

Optionnal

You may set up if you're using aria or data attributes.

For CSS, you may add:

.expandmore__button {
  background: none;
  font-size: inherit;
  color: inherit;
}

.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 : '− ';
}

Examples

This jQuery plugin doesn't style anything, styles can be added using other classes.

A demo page can be found here with additional features/docs: https://a11y.nicolas-hoffmann.net/hide-show/

Enjoy.

Vanilla version

This script exists also in a Vanilla-JS version, have a look at Van11y hide-show script.

Chuck Norris approved this

P.S: this plugin is in MIT license. It couldn't be done without the precious help of @ScreenFeedFr, @goetsu, @johan_ramon, @accesbilis, @Kozlika, @anneCav and @romaingervois.

You can’t perform that action at this time.