title: changing image src for expand/collapse function (JQ or JS)
body: <p>I've tried several methods found on this site to get my script to change "+" and "-" expand/collapse button images, but I haven't yet found a suitable fix/method.</p>
  
  <p>Currently, I am using plain JS as follows:</p>
  
  <pre><code>function swapimg(id) {
  if(document.getElementById(id).src='images/bullet_expand.png')
  {document.getElementById(id).src='images/bullet_expanded.png'}
  else {document.getElementById(id).src='images/bullet_expand.png'}
  }
  </code></pre>
  
  <p>and the button:</p>
  
  <pre><code>&lt;a href="javascript:void();" onclick="toggle_visibility('item1'); swapimg('phb');"&gt;
  &lt;img src="images/bullet_expand.png" border="0" style="padding-right: 5px;" id="phb" alt=""&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>The first click does change the image, but the second click does nothing. I have a feeling using "getElementById" might not be the standard call, so using JQuery is also an option I will consider.</p>