Hello all,

Below is a script I've set up that is working successfully. It toggles a portion of content in a table to show/hide multiple rows, upon a mouseclick over an image. The image reads "Show 2008", and when clicked, it also swaps to another image that reads "Hide 2008", and then back to "Show 2008" when the toggle is clicked again to hide the content. So this is all working already.

However, I'd like to add a DIFFERENT image toggle, later on in the table, using a pair of images that will read "Show 2009" or "Hide 2009", and then another image swap for "Show 2010", "Hide 2010", and so on. Is this possible to add to my coding without using multiple additional javascripts?

Here's what I have now:

Code:
<script type="text/javascript">

    function toggle_visibility(id,imgid) {
       var e = document.getElementById(id);
       if(e.style.display == '')
          {e.style.display = 'none';
          document.getElementById(imgid).src="/images/Show2008.jpg"}
       else {
          e.style.display = '';
          document.getElementById(imgid).src="/images/Hide2008.jpg"}
    }
</script>

<table border=1 width=400 cellpadding=30>
    <tr>
       <td width=60> <a onclick="toggle_visibility('2008','2008i');"><img src="/images/Show2008.jpg" width=50 id="2008i"></a></td>
       <td> This is already showing </td>
    </tr>
<tbody  id="2008" style='display:none';>
    <tr>
        <td></td>
        <td> A Bunch of Content from 2008 That Is Shown / Hidden </td>
    </tr>
</tbody>
    <tr>
       <td><a onclick="toggle_visibility('2009','2009i');"><img src="/images/Show2009.jpg" width=50 id="2009i"></a></td>
       <td> This is also already showing </td>
    </tr>
<tbody id="2009" style='display:none';>
    <tr>
       <td></td>
       <td> This 2009 data also gets shown / hidden, but I'd sure like to get that second image to change also!   Currently, it just switches this toggle image back to the 2008 Show/Hide JPGs.</td>
    </tr>
</tbody>
</table>