https://github.com/timwright12/a11y-hideshow

A simple, yet fairly complex (and accessible) hide/show toggle behavior
https://github.com/timwright12/a11y-hideshow

Last synced: 3 days ago
JSON representation

A simple, yet fairly complex (and accessible) hide/show toggle behavior

• Host: GitHub
• URL: https://github.com/timwright12/a11y-hideshow
• Owner: timwright12
• License: mit
• Created: 2016-02-23T18:18:33.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2016-09-14T15:19:08.000Z (almost 10 years ago)
• Last Synced: 2025-09-11T04:47:56.160Z (10 months ago)
• Language: JavaScript
• Size: 12.7 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Accessible Hide/Show

A simple, yet fairly complex (and accessible) hide/show toggle behavior

View the Pen: http://codepen.io/timwright12/pen/yerzqG

## Syntax for using a button as the toggle

	

		Show

	

	


### type="button"

This is standard HTML to make a button be a button.

### data-action="hide-show"

This attribute calls the plugin on this element.

### data-text="hide"

This is the text you want to replace the current button text when the toggle happens, it is optional.

### data-class="is-hidden"

If you're using a class to hide content, add that here otherwise the plugin will just use JavaScript, this is optional

### aria-controls="your-target-id"

This tells the plugin which `div` to target for the hide-show. It is the ID attribute for the element.

### aria-live="polite"

If you're updating the button text iwht data-text, you'll need this to alert screen readers.

### aria-expanded="false"

The default state of the target area, false = closed, true = open

## Syntax for using a link as the toggle

This could have all the say attributes as the button toggle, but some are a bit redundant

	

		Show