Hide/Show Example 2: Region does not follow Hide/Show Button

<h2>List of Messages</h2>

<ul class="msglinks">
  <li>
      <a id="open1" href="#" role="button" aria-controls="m1">
            <span>Show</span>
            Message 1
      </a>
  </li>
  <li>
      <a id="open2" href="#" role="button" aria-controls="m2">
           <span>Show</span>
           Message 2
      </a>
  </li>
  <li>
      <a id="open3" href="#" role="button" aria-controls="m3">
           <span>Show</span>
           Message 3
      </a>
  </li>
  <li>
      <a id="open4" href="#" role="button" aria-controls="m4">
           <span>Show</span>
           Message 4
      </a>
  </li>
</ul>

<div id="m1" class="message" tabindex="-1" role="region" aria-labelledby="m1-label" aria-expanded="false">
    <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>
    <p>
        <a id="close1" href="#open1" role="button" aria-controls="m1">
             Close
             <span class="hidden">Message 1</span>
        </a>
    </p>
</div>

<div id="m2" class="message" role="region" aria-labelledby="m2-label" tabindex="-1" aria-expanded="false">
      <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>
      <p>
        <a id="close2" href="#open2" role="button" aria-controls="m2">
            Close
            <span class="hidden">Message 2</span>
        </a>
    </p>
</div>

<div id="m3" class="message" role="region" aria-labelledby="m3-label" tabindex="-1" aria-expanded="false">
       <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>
       <p>
         <a id="close3" href="#open3" role="button" aria-controls="m3">
            Close
            <span class="hidden">Message 3</span>
         </a>
       </p>
</div>

<div id="m4" class="message" role="region" aria-labelledby="m4-label" tabindex="-1" aria-expanded="false">
       <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>
       <p>
         <a id="close4" href="#open4" role="button" aria-controls="m4">
            Close
            <span class="hidden">Message 4</span>
         </a>
       </p>
</div>

  <script type="text/javascript">
$(document).ready(function() {

  // bind a click handler to the open buttons
  $('#open1, #open2, #open3, #open4').click(function(e) {

    // find the region the button controls
    var $region = $('#' + $(this).attr('aria-controls'));
    
    $region.slideDown(100, function() {

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

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

    e.stopPropagation();
    return false;
  });
  
  // bind a click handler to the open buttons
  $('#close1, #close2, #close3, #close4').click(function(e) {

    // get an object pointing to the open button for the region
    var $openID = $($(this).attr('href'));

    // find the region the button controls
    var $region = $('#' + $(this).attr('aria-controls'));
    
    // collapse the region
    $region.slideUp(100, function() {

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

      // move focus to the button
      $openID.focus();
    });

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

  </script>

  <style type="text/css">
.hidden {
    display: none;
}

div.message
{
  display: none;
  margin: .5em;
  padding: .5em;
  border: 2px solid #880000;
  width: 40em;
}

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

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

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

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


  </style>