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

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

• javascript
• jquery
• css
• toggle

Share Follow asked Sep 8, 2013 at 1:18 Nahomy AtiasNahomy Atias 20311 gold badge33 silver badges66 bronze badges 2

• 2 Set the two images to background-images for classes and use .toggleClass() instead. – DevlshOne Commented Sep 8, 2013 at 1:22
• To be honest, you are doing a few things wrong. See my answer below for examples and full working edit to your code :) – Aaron Commented Sep 8, 2013 at 1:58

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

Check the syntax for .attr. It should be something like

$('#btn').attr('src', 'your image src'); 

Function Reference: http://api.jquery./attr/

To change the value of src you use 'attr' like this:

$('#btn').attr('src', 'images/button2.png');

Here is a DEMO

HTML

<div id="idd" class='display-none'>

- Here my hidden content -

</div>

<!-- Button -->
<img src="http://placekitten./40/40" id="btn">

CSS

.display-none {
    display:none;
}

jQuery

var btn = $('#btn');
var idd = $('#idd');

btn.click(function() {  
   idd.toggle(800, function() {
      // change the button text according to the state of the "#idd" 
      if (idd.hasClass('display-none')) {
        btn.attr('src', 'http://placekitten./50/50'); 
          idd.removeClass('display-none');
              } else {
        btn.attr('src', 'http://placekitten./40/40');
          idd.addClass('display-none');
       }
    });
  });

take one division e.g #play-pause-button and other in this i.e #play-pause. now put ur images in the src of inner division , on the click of outer divison source of innner division will change.. here is simillar example i'm working on. hope will help you.!

$('#play-pause-button').click(function () {
            // $('#play-pause-button').play();
            if ($("#media-video").get(0).paused) {
                $("#media-video").get(0).play();
                $("#play-pause").attr('src', "Image1 path");
            }
            else {
                $("#media-video").get(0).pause();
                $("#play-pause").attr('src', "Image2 path");
            }
        });

You should use css to associate image(s) on your "button" and a css class to determine which to show.

You can then use Jquery's ToggleClass() to add/remove the class. You can use the same class to show/hide your hidden content.

markup

<div id="idd">
   - Here my hidden content -
</div>
<div id="btn">Click Me</div>

css

#idd.off {
    display:none;
}
#btn {
    border:1px solid #666;
    width:100px; height:100px;
    background:#fff url(images/button.png) no-repeat 0 0;  // Show Less.. button
}
#btn.off {
    background:#fff url(images/button2.png) no-repeat 0 0; //Learn More.. button
}

jquery

$('#btn').click(function(){
    $('#idd').toggleClass('off');
    $('#btn').toggleClass('off');
});