CODEWITHSUNDEEP
javascriptjqueryhtml
the_
the_

Reputation: 1173

Plus sign not changing back

I have a simple toggle script that looks like this:http://jsfiddle.net/M4pZc/

When the page is initially displayed the + is shown, and when toggled changes to a -. But when clicked again, doesn't change back to a +

Why doesn't this work? All I'm doing is a if/else if the element is visible, so when the #hidden div is not visible, it should be changing back to a +.

Here's the Jquery:

$(function(){
   $("#showMore").click(function(){
      $("#hiddenMore").slideToggle(200);
      $("#hiddenMore").is(":visible") ? $("#showMore").text("More -") : $("#showMore").text("More +");
   });
});

Upvotes: 0

Views: 66

Answers (1)

PSL
PSL

Reputation: 123739

You need to put it under the callback for slideToggle, since it is not guaranteed that the element visible check is executed after the animation is complete:

 $("#showMore").click(function(){
      $("#hiddenMore").slideToggle(200, function(){
         $(this).is(":visible") ? $("#showMore").text("More -") : $("#showMore").text("More +");
      });

   });

Fiddle

You can try this way too, using the text's function callback to swap the text on completion of animation:

$(function () {
    $("#showMore").click(function () {
        var $this = $(this);
        $("#hiddenMore").slideToggle(200, function(){
            $this.text(function (_, text) {
               return text == "More -" ? "More +" : "More -";
            });
        });
    });
});

Fiddle

Upvotes: 5

Related Questions