JQUERY Show overlay when button click work only first time. What's wrong?

Question

Why my overlay 'p' (bg purple with yellow text) is showing only once after button clicked, even if I have toggle the function?

Have a look to my codepen to test the issue:

https://codepen.io/cat999/project/editor/AEeEdg

    $('.animate-this').click(function() {
                $('p').slideToggle("fast");
        });

Easy way to fix this?

Answer 1

The .animate-this element gets hidden when the <p> is visible. You can add the same functionality to the <p> , then it will work.

$('.animate-this, p').click(function() {
    $('p').slideToggle("fast");
});

However, I would recommend not biding an event to a tag, but to a class. So you can just add the class .animate-this to the <p> tag and it will work too, like this:

<p class="animate-this">If you click i need to show up again!</p>