title: How can I toggle the images for this expand/collapse button using jQuery?
body: <p>I want to be able to expand/collapse a menu, I can do that, but by clicking the button, and the button image should change based on the state of the collapsed menu.</p>
  
  <p>Here's the code I was trying, but I can't seem to get it to work like I wanted.</p>
  
  <pre><code>$(document).ready(function() {
      $('#toggle1').click(function() {
          $('#collapse1').slideToggle(400);   
          if (visible) {
              $('#toggle2').attr('src', 'media/collapse.png');
          }
          else {
              $('#toggle2').attr('src', 'media/expand.png');
          }
      });
      $('#toggle2').click(function() {
          $('#collapse2').slideToggle(400);
          if (visible) {
              $('#toggle2').attr('src', 'media/collapse.png');
          }
          else {
              $('#toggle2').attr('src', 'media/expand.png');
          }       
      });
  });
  </code></pre>
  
  <p>Could anyone offer some advice?</p>