Difference between revisions of "ARIA Expanded state"

From Level Access Web Labs
Jump to navigation Jump to search
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="true"> Details </button>
+
     <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="true" href="http://www.ssbbartgroup.com"> SSB</a>
+
     <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.