Changing image on jquery toggle function

Question

I'm trying to change an image using the replace command when toggling using jquery..basically showing a downward arrrow which becomes an upward arrow after the content is revealed. This following code works except the downward arrow doesn't get replaced.

<img src="/images/arrow_down.png" id="#1" class="nav-toggle">
<div id="1" style="display:none">some content</div>

and here is the jquery code

jQuery('document').ready(function($) {
    jQuery('.nav-toggle').click(function() {
        var collapse_content_selector = $(this).attr('id');
        var toggle_switch = $(this);
        $(collapse_content_selector).toggle(function() {
            if ($(this).css('display') == 'none') {

            } else {
                toggle_switch.attr("src").replace("down", "up");
            }
        });
    });
});

IDs shouldn't start with numbers.

meder omuraliev
– meder omuraliev

2012-09-10 16:29:31 +00:00
Commented Sep 10, 2012 at 16:29 — meder omuraliev
– meder omuraliev, Commented Sep 10, 2012 at 16:29
why you used the # in id is there any reason using this ?

Mayank K. Swami
– Mayank K. Swami

2012-09-10 16:30:38 +00:00
Commented Sep 10, 2012 at 16:30 — Mayank K. Swami
– Mayank K. Swami, Commented Sep 10, 2012 at 16:30

Rusty Jeans · Accepted Answer · 2012-09-10 16:30:30Z

2

You're not assigning it back to the src, try:

toggle_switch.attr("src", toggle_switch.attr("src").replace("down", "up"));

answered Sep 10, 2012 at 16:30

Rusty Jeans

1,4229 silver badges10 bronze badges

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

Comments

iambriansreed · Accepted Answer · 2012-09-10 16:36:04Z

2

Less code is better.

HTML

<a href="#" id="#arrow-toggle">
    <img src="/images/arrow_down.png">
    <img src="/images/arrow_up.png" class="up" style="display: none;">
</a>
<div id="content" style="display:none">some content</div>

jQuery

(function($) { 

    $('#arrow-toggle').click(function(event) {
        event.preventDefault();
        $('img:visible', this).hide().siblings().show();
        $('#content').toggle($('img:visible').is('.up'));
    });

})(jQuery);

answered Sep 10, 2012 at 16:36

iambriansreed

22.3k6 gold badges66 silver badges81 bronze badges

Comments

Alfred · Accepted Answer · 2012-09-10 16:49:05Z

2

You should use something like;

jQuery('.nav-toggle').click(function() {
        var collapse_content_selector = $(this).attr('id');
        var toggle_switch = $(this);
        $(collapse_content_selector).toggle(function() {
            if ($(this).css('display') == 'none') {
                toggle_switch.attr("src", toggle_switch.attr("src").replace("image_2.jpg", "image_1.jpg"));
            } else {
                toggle_switch.attr("src", toggle_switch.attr("src").replace("image_1.jpg", "image_2.jpg"));
            }
        });
    });

Here is a live demo.

answered Sep 10, 2012 at 16:49

Alfred

21.5k64 gold badges175 silver badges258 bronze badges

Comments

CoffeeRain · Accepted Answer · 2013-03-13 16:40:10Z

0

I think you should try jQuery.UI.toggleSwitch()

edited Mar 13, 2013 at 16:40

CoffeeRain

4,5304 gold badges33 silver badges50 bronze badges

answered Sep 10, 2012 at 16:33

Sender

6,90812 gold badges49 silver badges69 bronze badges

Comments

Mahesh · Accepted Answer · 2013-05-24 10:01:20Z

0

HTML

<img src="/images/arrow_down.png" id="#1" class="nav-toggle">
<div id="1" style="display:none">some content</div>

jQuery

$(function(){
  $('.nav-toggle').on('click', function(){
    var t = $(this);
    var imgSrc = t.attr('src');
    var divId = t.attr('id');
    $(divId).toggle('slow', function() {
      if (imgSrc === '/images/arrow_down.png') {
        t.attr({'src' : '/images/arrow_up.png'});
      } else {
        t.attr({'src' :'/images/arrow_down.png'});
      }
     });
  });
});

Try this one

answered May 24, 2013 at 10:01

Mahesh

3201 silver badge11 bronze badges

Comments

salah · Accepted Answer · 2013-07-16 00:23:00Z

0

$("div#id").slideToggle(function() {
            if ($(this).css('display') == 'none') {
                $("div#id").css({'background-image':'url(css/img/nav_plus.gif)'});
            } else {
                $("div#id").css({'background-image':'url(css/img/nav_minus.gif)'});
            }
        });

another easy solution may be can help someone ;)

answered Jul 16, 2013 at 0:23

salah

1

Collectives™ on Stack Overflow

Changing image on jquery toggle function

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related