Viestilista

HTML

<h2>Viestilista</h2>

<ul class="viestit">
    <li id="avaa1" class="buttonControl" aria-controls="viesti1">Näytä viesti 1</li>
    <li id="avaa2" class="buttonControl" aria-controls="viesti2">Näytä viesti 2</li>
    <li id="avaa3" class="buttonControl" aria-controls="viesti3">Näytä viesti 3</li>
</ul>

<div id="viesti1" class="viesti" role="region" aria-labelledby="viesti1-label" aria-expanded="false">
    <h2 id="viesti1-label">Viesti 1</h2>
    <p>Viestin 1 sisältö. Ei tässä muuta.</p>
    <button id="sulje1" class="buttonControl" aria-controls="viesti1">Sulje <span class="hidden">viesti 1</span></button>
</div>

<div id="viesti2" class="viesti" role="region" aria-labelledby="viesti2-label" aria-expanded="false">
    <h2 id="viesti2-label">Viesti 2</h2>
    <p>Viestin 2 sisältö. Ei tässä muuta.</p>
    <button id="sulje2" class="buttonControl" aria-controls="viesti2">Sulje <span class="hidden">viesti 2</span></button>
</div>

<div id="viesti3" class="viesti" role="region" aria-labelledby="viesti3-label" aria-expanded="false">
    <h2 id="viesti3-label">Viesti 3</h2>
    <p>Viestin 3 sisältö. Ei tässä muuta.</p>
    <button id="sulje3" class="buttonControl" aria-controls="viesti3">Sulje <span class="hidden">viesti 3</span></button>
</div>

CSS

.hidden {
    display: none; 
}

ul.viestit {
   list-style: none;
}
div.viesti {
  display: none;
  margin: .5em;
  padding: .5em; 
  border: 2px solid #880000;
  width: 40em;
}

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

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

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

.buttonControl {
  color: #004400;
  border-bottom: 1px solid #004400;
}

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

JavaScript

$(document).ready(function() {
   var hs1 = new hideShow('avaa1', 'sulje1');
   var hs2 = new hideShow('avaa2', 'sulje2');
   var hs3 = new hideShow('avaa3', 'sulje3');
  
}); 

//
// @param(toggleID string) toggleID is the html ID of the toggle button to attach to
//
// @param(closeID string) closeID is the html ID of the close button to attach to
//
// @return N/A
//
function hideShow(toggleID, closeID) {

   this.$toggle = $('#' + toggleID);
   this.$close = $('#' + closeID);
   this.$region = $('#' + this.$toggle.attr('aria-controls'));

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

   this.toggleSpeed = 100;

   // bind handlers
   this.bindHandlers();

} 

//
// 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.$toggle.click(function(e) {

      thisObj.toggleRegion();

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

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

      thisObj.hideRegion();

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

// Function hideRegion() is a member function to hide an expanded region and return focus to
// the toggle button
//
// return N/A
//
hideShow.prototype.hideRegion = function() {

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

   // update the button label
   this.$toggle.find('span').html('Show');

   // return focus to the toggle button
   this.$toggle.focus();

};

//
// 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...