Image Swap on Show/Hide Toggle

[bluecollar01]

Hi All,

Noob at javascript and need some help with changing an image onclick to show/hide DIV(s).

Here is my script to show/hide DIV9s):

<script language="javascript" type="text/javascript">
      function toggleSpecific(elementid) {
        var node = document.getElementById(elementid);
        if(node.style.display == '') {
          node.style.display='none';
        }
        else {
          node.style.display = '';
        }
      }
	  </script>

Here is image area and hidden DIV(s) of which there are 4:

<div class="why">
<div class="button"><a href="javascript:toggleSpecific('hide1');" title="Hide1"><img src="images/expand_btn.png" alt="Expand/Collapse" width="25" height="24" border="0" style="float:right; margin:-5px 20px 0px 0px;" /></a>Button Title Here</div>

<div id="hide1" style="margin:0px 11px 0px 11px; display: none;">
<p class="subhead_01">Subhead</p>
<p>This is a paragraph.</p>
</div>

Any help on how to best accomplish this would be appreciated.

Thanks in advance for your feedback!