jQuery slide toggle change image onclick

Question

I'm using .slideToggle to show/hide content when an image is clicked, it changes once when the content shows but doesn't change back to the original image when its clicked again to hide the content, not quite sure what I'm missing here. Any help much appreciated.

the jQuery:

$(document).ready(function() {

    $('#toggle1').click(function() {
        $('.toggle1').slideToggle('1100');
        $("#bg").attr('src',"images/box-arrow-down.jpg");
        return false;

    });

the HTML:

<div class="box">
  <div style="width:1100px;height:100px;margin-left:40px;">
    <span style="float:left;"><a href="#" id="toggle1"><img src="images/box-arrow-up.jpg" height="16" width="17" alt="arrow" id="bg" style="margin-top:40px;" /></a></span>
  </div>
  <div class="toggle1" style="display:none;width:1100px;padding:0px;margin-left:8px;">
  <div class="boxTime">09:00</div>
  </div>
</div>

Dom · Accepted Answer · 2013-04-10 22:03:18Z

1

You do not reference the original src. You can go about this in hundreds of different ways... but here are a couple examples.

You can do something like this:

$(document).ready(function() {
    $('#toggle1').click(function() {
        $('.toggle1').slideToggle('1100');
        var src = $("#bg").attr('src') == "images/box-arrow-down.jpg" ? "images/box-arrow-up.jpg" : "images/box-arrow-down.jpg";
        $("#bg").attr('src', src);
        return false;

    });
});

DEMO: http://jsfiddle.net/dirtyd77/NCqRk/

Or something like this:

$(document).ready(function() {
    var originalImage = $("#bg").attr('src');

    $('#toggle1').click(function() {
        $('.toggle1').slideToggle('1100');
        var src = $("#bg").attr('src') == originalImage ? "images/box-arrow-down.jpg" : originalImage;
        $("#bg").attr('src', src);
        return false;

    });
});

DEMO: http://jsfiddle.net/dirtyd77/NCqRk/1/

edited Apr 10, 2013 at 22:03

answered Apr 10, 2013 at 21:58

Dom

40.7k12 gold badges56 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mark Over a year ago

thanks, thats great, it makes sense now. I've actually hit upon another issue, I want to slide toggle multiple divs independently using the same function, how can I achieve this?

Mark Over a year ago

I tried using classes instead of IDs but couldn't get it to work. This example is using a function for each block of divs with a different ID, seems like not a very efficient way of doing it, jsfiddle.net/TyjRv/3

Collectives™ on Stack Overflow

jQuery slide toggle change image onclick

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related