Example Start

Topic 1

Topic 2

Topic 3

Topic 4

Example End

Example Description

Type: Best Practice

Simple example of hiding and showing regions using aria-expanded. aria-controls is used to maintain markup associations.’

Keyboard Support

  • Tab: Move between button items and text area.
  • Enter or space: Toggle display of hide/show regions.

Example Markup

Browser Compatibility

HTML Source Code


<h2 id="t1-label">Topic 1</h2>

<p class="button">
    <button id="button1" class="buttonControl" aria-controls="t1"><span>Show</span> Topic 1</button>
</p>

<div id="t1" class="topic" role="region" aria-labelledby="t1-label" tabindex="-1" aria-expanded="false">
    Topic 1 is all about being Topic 1 and may or may not have anything to do with other topics.
</div>

<h2 id="t2-label">Topic 2</h2>

<p class="button">
    <button id="button2" class="buttonControl" aria-controls="t2"><span>Show</span> Topic 2</button>
</p>

<div id="t2" class="topic" role="region" aria-labelledby="m2-label" tabindex="-1" aria-expanded="false">
       Topic 2 is all about being Topic 2 and may or may not have anything to do with other topics.
</div>

<h2 id="t3-label">Topic 3</h2>

<p class="button">
    <button id="button3" class="buttonControl" aria-controls="t3"><span>Show</span> Topic 3</button>
</p>

<div id="t3" class="topic" role="region" aria-labelledby="m3-label" tabindex="-1" aria-expanded="false">
       Topic 3 is all about being Topic 3 and may or may not have anything to do with other topics.
</div>

<h2 id="t4-label">Topic 4</h2>

<p class="button">
    <button id="button4" class="buttonControl" aria-controls="t4"><span>Show</span> Topic 4</button>
</p>

<div id="t4" class="topic" role="region" aria-labelledby="m4-label" tabindex="-1" aria-expanded="false">
       Topic 3 is all about being Topic 3 and may or may not have anything to do with other topics.
</div>

CSS Code


div.topic {
    display: none;
    margin-bottom: 1em;
    padding: .25em;
    border: black thin solid;
    background-color: #EEEEFF;
    width: 40em;
}

p.button {
    margin: .25em;
    padding: .25em;  
}

h2 {
  margin: 0;
  padding: 0;
  margin-top: 1em;  
  
}

a.buttonControl {
  color: #004400;
  text-decoration: none;
  border-bottom: 1px solid #004400;
}

a.buttonControl:hover,
a.buttonControl:active,
a.buttonControl:focus {
  color: #880000;
  border-bottom: 2px solid #880000;
}

Javascript Source Code


$(document).ready(function() {

   var hs1 = new hideShow('button1');
   var hs2 = new hideShow('button2');
   var hs3 = new hideShow('button3');
   var hs4 = new hideShow('button4');
  
}); // end ready()

//
// function hideShow() is the constructor for a hideShow widget. it accepts the html ID of
// an element to attach to.
//
// @param(id string) id is the html ID of the element to attach to
//
// @return N/A
//
function hideShow(id) {

   this.$id = $('#' + id);
   this.$region = $('#' + this.$id.attr('aria-controls'));

   this.keys = {
               enter: 13,
               space: 32
               };

   this.toggleSpeed = 100;

   // bind handlers
   this.bindHandlers();

} // end hidShow() constructor

//
// Function bindHandlers() is a member function to bind event handlers to the hideShow region
//
// return N/A
//
hideShow.prototype.bindHandlers = function() {

   var thisObj = this;

   this.$id.click(function(e) {

      thisObj.toggleRegion();

      e.stopPropagation();
      return false;
   });
}

//
// Function toggleRegion() is a member function to toggle the display of the hideShow region
//
// return N/A
//
hideShow.prototype.toggleRegion = function() {

      var thisObj = this;

    // toggle the region
    this.$region.slideToggle(this.toggleSpeed, function() {

      if ($(this).attr('aria-expanded') == 'false') { // region is collapsed

        // update the aria-expanded attribute of the region
        $(this).attr('aria-expanded', 'true');

        // move focus to the region
        $(this).focus();

        // update the button label
        thisObj.$id.find('span').html('Hide');

      }
      else { // region is expanded

        // update the aria-expanded attribute of the region
        $(this).attr('aria-expanded', 'false');

        // update the button label
        thisObj.$id.find('span').html('Show');
      }
    });

} // end toggleRegion()