jQuery toggle with animate.css

Question

Using this

$('.trigger').click(function() {
    $(this).next().toggle();
});

to toggle the very next div element works nicely. Now I would like to add some animations with animate.css. Clicking the tricker link opens the div with the animation I choose, but another click on the link does not close the div. It opens/closes on click with the upper code. What am I doing wrong here?

 <div class="trigger"> 

    <div class="hello">Welcome</div>

</div>      

<div class="drop-down-main" style="display:none";>

    <div class="text">

            <div class"small">Lorem Ipsum</div>

    </div>

</div>

JS

$('.trigger').click(function() {
    $(this).next().toggle().addClass("animated pulse");
});

Thanks for your help!

It's going to be hard, if not impossible, to answer this without seeing a working example (or at least your CSS and HTML), but it's likely that toggle() instantly makes the element visible before the animations on the CSS classes have a chance to be applied. — Rory McCrossan
– Rory McCrossan, Commented Oct 26, 2017 at 14:06
It depends on what css properties are set with css classes animated pulse — MysterX
– MysterX, Commented Oct 26, 2017 at 14:06

Snowmonkey · Accepted Answer · 2017-10-26 14:56:35Z

1

The animate.css takes care of the hide/show -- remove the toggle() you've got in there.

// Before anything else, let's add the animated
//  class and a starting animation.
$(".trigger").next().addClass("animated pulse");

// Each time it's clicked, switch the div
//   off or on, using in/out animations.
$('.trigger').click(function() {
  $(this).next().toggleClass("fadeOut").toggleClass("pulse");
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="trigger">
Click me!
</button>
<div>
<p>Pellentesque in ipsum id orci porta dapibus. Donec sollicitudin molestie malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget tortor risus. Curabitur aliquet quam id dui posuere blandit.</p>

<p>Nulla quis lorem ut libero malesuada feugiat. Proin eget tortor risus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Sed porttitor lectus nibh.</p>
</div>

answered Oct 26, 2017 at 14:56

Snowmonkey

3,7611 gold badge18 silver badges16 bronze badges

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

1 Comment

Robin Alexander Over a year ago

Thanks for your help! That looks great as long as <p> is visible. I have the toggled div hidden with (in your case) <p style="display:none"> and that makes me some problems here.

Collectives™ on Stack Overflow

jQuery toggle with animate.css

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related