Long Description Example 2: Using aria-described by to point to a show/hide button

<div class="example">
    <h2>Blackberry Tree Heights</h2>

<p>
   <img
       src="images/histogram.png"
       alt="Histogram of Blackberry tree heights"
       width="80%"
       aria-describedby="longdesc1"
   />
</p>

<p>
    <!--
        The button element is used to get the implied role of "button" in the accessibility API
    -->
    <button
        class="showhide"
        id="longdesc1"
        aria-label="Show or hide data for Histogram of Blackberry tree heights"
        aria-controls="desc1"
        >
        <span>Show</span>
        Data
    </button>
</p>

<div
    id="desc1"
    role="region"
    aria-labelledby="desc1-label"
    aria-expanded="false">

    <table  
        border="1"
        cellspacing="0"
        summary="Data on the frequency of the height of blackbeery trees">
        
      <caption id="desc1-label">Blackbeery Tree Heights</caption>
        
      <thead>
        <tr>
            <th>Height</th>
            <th>Frequency</th>
        </tr>
      </thead>
      <tbody>
        <tr>
            <th>60-65 feet</th>
            <td>3</td>
        </tr>
        <tr>
            <th>65-70 feet</th>
            <td>3</td>
        </tr>
        <tr>
            <th>70-75 feet</th>
            <td>8</td>
        </tr>
        <tr>
            <th>75-80 feet</th>
            <td>10</td>
        </tr>
        <tr>
            <th>80-85 feet</th>
            <td>5</td>
        </tr>
        <tr>
            <th>85-90 feet</th>
            <td>2</td>
        </tr>
    </tbody>
</table>
</div>
    
</div>

<div class="example">
    <h2>Rembrandt's Painting Musical Allegory</h2>
  <p>
    <img
      src="images/musical_allegory.jpg"
      alt="Rembrandt's painting musical allegory"
      width="80%"
      aria-describedby="longdesc2"/>
  </p>

   <!--
       The button element is used to get the implied role of "button" in the accessibility API
       -->
  <p>
    <button
      class="showhide"
      id="longdesc2"
      aria-label="Show or hide description of Rembrandt's painting musical allegory"
      aria-controls="desc2">
      <span>Show</span>
      Description
    </button>
  </p>

  <div
    id="desc2"
    role="region"
    aria-labelledby="desc2-label"
    aria-expanded="false">
      <h2 id="desc2-label">Rembrandt's Painting Musical Allegory</h2>
    Led by a young woman, a group of people are playing music in a room.
    She is reading the music from the sheet, singing and beating time.
    The two men are accompanying her on their instruments - the young man on the harp and the older man on a viola da gamba.
    An older woman is reading over the girl's shoulder, listening attentively with her hand on her chin.
    In the foreground is a violin, a lute and a pile of books.
    This is an early work by Rembrandt from 1626.
    He made it when he was twenty years old and signed it with the monogram RH: Rembrandt Harmensz.
    The painting was only 'discovered' to be by Rembrandt in 1936.
    Two vertical halves make up this panel; the join can be clearly seen in the centre.
  </div>
</div>

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

  function() {
  
    $('button.showhide').click(
    
       function() {
      
         var node_id = $(this).attr('aria-controls');
        
         var node = document.getElementById( node_id );

         if( $(node).css('display') == 'none' ) {
            $(node).css('display', 'block');
            $(node).attr('aria-expanded', 'true');
            $(this).find('span').text('Hide');
         } else {
            $(node).css('display', 'none');        
            $(node).attr('aria-expanded', 'false');
            $(this).find('span').text('Show');
         }  // endif
                
       } // end each function
    
    ); // end each interator
  
  } // end ready function


);  // end ready event  </script>

  <style type="text/css">
div#desc1,
div#desc2 {
  display: none;
}

div.example {
  margin: 2em;
  padding: 1em;
  padding-left: 5%;
  width: 50%;
  background-color: #EEEEEE;
  border: #888888 solid medium;
}

table#table1 {
  border: none;
}

table th {
  width: 8em;
}

table td {
  text-align: center;
}

table tbody th {
  font-weight: normal;
}

  </style>