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!

Answer 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>