Hide/Show: Region follows button

Description

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 Start

Topic 1

Topic 2

Topic 3

Topic 4

Example End

Roles

  • button
  • region

Properties

  • aria-controls
  • aria-expanded
  • aria-labelledby

HTML Source Code


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<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 Source 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


var OAA_EXAMPLES = OAA_EXAMPLES || {};
$(document).ready(function() {

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

/**
* @constructor hideShow
*
* @memberOf OAA_EXAMPLES
*
* @desc the constructor for a hideShow widget. it accepts the html ID
* of an element to attach to.
*
* @param {string} id - the html ID of the element to attach to
*
* @return N/A
*/

/**
* @constructor Internal Properties
*
* @property {string} $id - the jquery pointer of the element
*
* @property {integer} toggleSpeed - initialized to 100
*/

OAA_EXAMPLES.hideShow = function(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

/**
* @method bindHandlers
*
* @memberOf OAA_EXAMPLES
*
* @desc a member function to bind event handlers to the hideShow region
*
* return {N/A}
*/

OAA_EXAMPLES.hideShow.prototype.bindHandlers = function() {

   var thisObj = this;

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

      thisObj.toggleRegion();

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

/**
* @method toggleRegion
*
* @memberOf OAA_EXAMPLES
*
* @desc a member function to toggle the display of the hideShow region
*
* return {N/A}
*/

OAA_EXAMPLES.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()