title: Changing a image for another after clicking on it with jquery
body: <p>this is going to be my first question so far cause i always do a research before using forums, but i dont get this to work.</p>
  
  <p>I have an Image that works as a button for a toggle animation (button.png) and i want that image to change after clicking on it for another image (button2.png), and once you click the second image it changes again to the first image, i have:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function() {
  
    // when click on the tag with id="btn"
    $('#btn').click(function() {
        // change the state of the "#idd"
      $('#idd').toggle(800, function() {
        // change the button text according to the state of the "#idd" 
        if ($('#idd').is(':visible')) {
          $('#btn').attr('images/button2.png', this.href); // Show Less.. button
                } else {
          $('#btn').attr('images/button.png', this.href); //Learn More.. button
  
        }
      });
    });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>and my Html:</p>
  
  <pre><code>&lt;div id="idd" style="display:none;"&gt;
  
  - Here my hidden content -
  
  &lt;/div&gt;
  
  &lt;!-- Button --&gt;
  &lt;img src="images/button.png" style="cursor: pointer;" id="btn"&gt;
  </code></pre>
  
  <p>What im doing wrong? Please Help :(</p>