CODEWITHSUNDEEP
jquery
Trey Copeland
Trey Copeland

Reputation: 3527

jQuery toggle only works first time

I have a toggle() button that I'm trying to get to show a plus/minus image. The only time it actually works is on the first click.

My code:

$("#xmlDiv").on("click", "ul", function(e) {
    $(this).find(".mainlist").slideToggle(function () {
        $('span.minus').html('<img src="images/plus.png">');
        },function() {
        $('span.minus').html('<img src="images/minus.png">');
    });
});

HTML:

<span class="minus"><img src="images/minus.png"></span>

I'm using the on because the content inside of #xmlDiv is populated after page load.

Thanks for any help!

Upvotes: 1

Views: 123

Answers (2)

Manish Rane
Manish Rane

Reputation: 579

You can use conditional operator ? : to to show a plus/minus image. My solution is following

$("#xmlDiv").on("click", "ul", function(e) {
    $(this).find(".mainlist").slideToggle(function () {
        $('span.minus').html($('span.minus').html('<img src="images/plus.png">') == '<img src="images/plus.png">' ? '<img src="images/minus.png">' : '<img src="images/plus.png">');
    });
});

Upvotes: 1

Manwal
Manwal

Reputation: 23816

slideToggle() can have only one callback which will call after completion, not multiple callback like hover event.

.slideToggle( [duration ] [, complete ] )

Consider following code having 2 parameter:

  • duration
  • Callback
$("#xmlDiv").on("click", "ul", function(e) {
    $(this).find(".mainlist").slideToggle('slow', function () {
        if($('span.minus img').attrib('src') == 'images/plus.png')
            $('span.minus img').attr("src", "images/minus.png");
        else
            $('span.minus img').attr("src", "images/plus.png");
    });
});

Upvotes: 2

Related Questions