View source for ARIA Expanded state

<html>
  <style type="text/css">
    .hidden {
       display:none;
    }
  </style>
  <head>
    <script type="text/javascript">
       function toggle(obj) {

         if (obj.getAttribute('aria-expanded') == 'true') {
           obj.setAttribute('aria-expanded','false');
           obj.nextSibling.nextSibling.className = "hidden";
         }
         else {
           obj.setAttribute('aria-expanded','true');
           obj.nextSibling.nextSibling.className = "";        
         }
       }
    </script>
  </head>
  <body>
  <p>Activate the button/link to expand them and set the aria-expanded state to true. Activate again to collapse.</p>
  <section>
    <button onclick="toggle(this);" id="b1" aria-expanded="false" aria-controls="p1"> Details </button>
    <p class="hidden" id="p1" tabindex="-1"> This is some text.</p>
  </section>
  <section>
    <a href="#" onclick="toggle(this);" id="a1" aria-expanded="false" aria-controls="p2" > Level Access</a>
    <p class="hidden" id="p2">Level Access is an digital accessibility solutions provider.</p>
  </section>

  <div role="img" aria-expanded="true"> test </div>
  <div role="tablist" aria-expanded="true"> test </div>
  <div role="tree" aria-expanded="true"> test </div>
  <body>
</html>

See also  [[ARIA Accordion]]

==Notes==
This example uses ARIA-Expanded and ARIA-Controls.

==Test Results==
JAWS with internet Explorer, Firefox and Chrome The expanded and collapsed state are announced as expected. In Firefox and Internet Explorer the JAWS command INSERT+ALT+M moves the virtual cursor to the new content. This does not work in Google chrome.
With NVDA the Expanded and collapsed state are announced as expected. Note there is no NVDA command to move to the new content.
In iOS with VoiceOver the Expanded and collapsed state are announced as expected.

[[Category: ARIA]]