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.

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:

<script type=text/javascript>

$(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



      }

    });

  });

});

</script>

and my Html:

<div id=idd style=display:none;>



- Here my hidden content -



</div>



<!-- Button -->

<img src=images/button.png style=cursor: pointer; id=btn>

What im doing wrong? Please Help :(