Difference between revisions of "ARIA Expanded state"
Jump to navigation
Jump to search
SSB
| Line 1: | Line 1: | ||
<html> | <html> | ||
| + | <style type="text/css"> | ||
| + | .hidden { | ||
| + | display:none; | ||
| + | } | ||
| + | </style> | ||
<head> | <head> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
function toggle() { | function toggle() { | ||
| − | + | if (this.getAttribute('aria-expanded') == 'true') { | |
| + | this.setAttribute('aria-expanded','false'); | ||
| + | this.nextSibling.className = "hidden"; | ||
| + | } | ||
| + | else { | ||
| + | this.setAttribute('aria-expanded','true'); | ||
| + | this.nextSibling.className = ""; | ||
| + | } | ||
} | } | ||
</script> | </script> | ||
| Line 10: | Line 22: | ||
<p>Activate the buttons to expand them and set the aria-expanded state to true. Activate again to collapse.</p> | <p>Activate the buttons to expand them and set the aria-expanded state to true. Activate again to collapse.</p> | ||
<section> | <section> | ||
| − | <button id="b1" aria-expanded=" | + | <button onclick="toggle(this);" id="b1" aria-expanded="false"> Details </button> |
| − | <p> This is some text.</p> | + | <p class="hidden"> This is some text.</p> |
</section> | </section> | ||
<section> | <section> | ||
| − | <a id="a1" aria-expanded=" | + | <a onclick="toggle(this);" id="a1" aria-expanded="false" href="http://www.ssbbartgroup.com"> SSB</a> |
| − | <p>SSB BART Group is an digital accessibility solutions provider.</p> | + | <p class="hidden">SSB BART Group is an digital accessibility solutions provider.</p> |
</section> | </section> | ||
<body> | <body> | ||
</html> | </html> | ||
[[Category: ARIA]] | [[Category: ARIA]] | ||
Revision as of 14:57, 11 September 2014
Activate the buttons to expand them and set the aria-expanded state to true. Activate again to collapse.
This is some text.
SSB BART Group is an digital accessibility solutions provider.
