CODEWITHSUNDEEP
jquery
dstN
dstN

Reputation: 332

jQuery queue-function to do something after toggleClass happened

I have a simple sliding-content-element which should show it's content if clicked on a link.

This is my markup:

<div class="boxwrap hidden-sm hidden-xs">
 <div class="boxright pull-left">
  <a href="#" id="toggleContactOpen" class="pull-left"><img src="img/envelope.png" alt="envelope-icon"></a>
    <div class="detail">
     <p>
      01234-567 890 123 4
      <a href="mailto:[email protected]" title="Write an E-Mail">[email protected]</a>
     </p>
    </div>
  </div>
</div>

and this is my jQuery:

$("#toggleContactOpen").click(function(){
    if($(".boxright").hasClass("showbox")) {
        $(".boxright").toggleClass("showbox");
        $(".detail").toggleClass("open-detail");
    }
    else {
        $(".boxright").toggleClass("showbox").delay(500).queue(function(){ 
            $(".detail").toggleClass("open-detail");
        });
    }
});

For the first click, all went right: boxright got the class "showbox" and detail got the class "open-detail", after 500ms. The closing also still works, both classes are getting toggled off the elements. But on the third click, only boxright gets the class "showbox", but detail doesn't get "open-detail". I don't know why... I would appreciate it if you can help me.

Upvotes: 1

Views: 89

Answers (1)

Satpal
Satpal

Reputation: 133403

You need to use .dequeue() to end a custom queue function.

$(".boxright").toggleClass("showbox").delay(500).queue(function(){ 
    $(".detail").toggleClass("open-detail");
    $(this).dequeue();
});

Upvotes: 2

Related Questions