Permanent link for Hide/Show: Region is exclusive

Example Start

List of Messages

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. Only one region may be displayed at a time.’

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>List of Messages</h2>

<ul class="controls">
  <li role="button" aria-controls="m1" aria-expanded="false" tabindex="0">
         <span>Show</span>
         Message 1
  </li>
  <li role="button" aria-controls="m2" aria-expanded="false" tabindex="0">
         <span>Show</span>
         Message 2
  </li>
  <li role="button" aria-controls="m3" aria-expanded="false" tabindex="0">
         <span>Show</span>
         Message 3
  </li>
  <li role="button" aria-controls="m4" aria-expanded="false" tabindex="0">
         <span>Show</span>
         Message 4
  </li>
</ul>

<div id="region_wrapper">
   <div id="m1" class="message" tabindex="-1" role="region" aria-labelledby="m1-label" aria-hidden="true">
       <h2 id="m1-label">Message 1</h2>
       <p>Message 1 is all about being message 1 and has nothing to do with any other messages.</p>
   </div>

   <div id="m2" class="message" role="region" aria-labelledby="m2-label" tabindex="-1" aria-hidden="true">
         <h2 id="m2-label">Message 2</h2>
         <p>Message 2 is all about being message 2 and has nothing to do with any other messages.</p>
   </div>

   <div id="m3" class="message" role="region" aria-labelledby="m3-label" tabindex="-1" aria-hidden="true">
          <h2 id="m3-label">Message 3</h2>
          <p>Message 3 is all about being message 3 and has nothing to do with any other messages.</p>
   </div>

   <div id="m4" class="message" role="region" aria-labelledby="m4-label" tabindex="-1" aria-hidden="true">
          <h2 id="m4-label">Message 4</h2>
          <p>Message 4 is all about being message 4 and has nothing to do with any other messages.</p>
   </div>
</div>

CSS Code


.hidden {
    display: none;
}

ul.controls {
   margin: 10px;
   padding: 0;
   list-style: none outside none;
}
ul.controls li {
   float: left;
   margin-bottom: 5px;
   padding: 5px 10px;
   width: 130px;
   text-align: center;
   border: 1px solid black;
}
ul.controls li {
   color: #004400;
   text-decoration: none;
}

ul.controls li:hover,
ul.controls li:active,
ul.controls li:focus {
   font-weight: bold;
   background-color: #fc3;
}
ul.controls li[aria-expanded="true"] {
   font-weight: bold;
}

div#region_wrapper {
   clear: both;
   width: 660px;
   height: 124px;
   background-color: #ccc;
   border: 1px solid black;
}
div.message
{
   padding: .5em;
   border: 2px solid #880000;
   width: 40em;
}

div.message[aria-hidden="true"] {
   display: none;
}

div#m1 {
   background-color: #ffefef;
}

div#m2 {
   background-color: #efffef;
}

div#m3 {
   background-color: #efefff;
}

div#m4 {
  background-color: #efffff;
}

Javascript Source Code


$(document).ready(function() {
   var keys = {
            enter: 13,
            space: 32
            };

   var $rgns = $('message');

   $('li').keydown(function(e) {

      if (e.altKey||e.ctrlKey||e.shiftKey) {
            // do nothing
      }
      else if (e.keyCode == keys.enter || e.keyCode == keys.space) {

         var $rgn =  $('#' + $(this).attr('aria-controls'));

         if ($(this).attr('aria-expanded') == 'true') {

            $(this).attr('aria-expanded', 'false');
            $rgn.attr('aria-hidden', 'true');

            $(this).find('span').html('Show');
         }
         else {
            $(this).attr('aria-expanded', 'true');
            $rgn.attr('aria-hidden', 'false');

            $(this).siblings().attr('aria-expanded', 'false');
            $rgn.siblings().attr('aria-hidden', 'true');

            $(this).siblings().find('span').html('Show');
            $(this).find('span').html('Hide');
         }

         e.stopPropagation();
         return false;
      }

      return true;
   });
  
   $('li').click(function(e) {

         var $rgn =  $('#' + $(this).attr('aria-controls'));

         if ($(this).attr('aria-expanded') == 'true') {

            $(this).attr('aria-expanded', 'false');
            $rgn.attr('aria-hidden', 'true');

            $(this).find('span').html('Show');
         }
         else {
            $(this).attr('aria-expanded', 'true');
            $rgn.attr('aria-hidden', 'false');

            $(this).siblings().attr('aria-expanded', 'false');
            $rgn.siblings().attr('aria-hidden', 'true');

            $(this).siblings().find('span').html('Show');
            $(this).find('span').html('Hide');
         }

      e.stopPropagation();
      return false;
   });
}); // end ready()