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?

score 0 · Answer 1 · answered May 23 '20 at 15:05

0

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>

answered May 23 '20 at 15:05

Elron

1,235
1
13
26

Thanks @Elron but when I re-clicked on the button the second time I still have the same issue and my `p` is still not visible. Could you tested on my codepen? – Marlene Rodrigues May 23 '20 at 15:08
Sure, but its Read Only. change it and I will be happy to assist. – Elron May 23 '20 at 15:10
how we could do it? unfortunately I could not change it in codepen probably. You could see my code anyway right? I have change the way you suggested me but still not work ```$('.animate-this, p').click(function() { $('p').slideToggle("fast"); });``` have a look – Marlene Rodrigues May 23 '20 at 15:13
I could send you a .zip files? – Marlene Rodrigues May 23 '20 at 15:20
are you still here ;) ? – Marlene Rodrigues May 23 '20 at 15:52
just replace to this line:
If you click i need to show up again!
– Elron May 23 '20 at 16:14
use "this" instead of "'p'", like this: $('.animate-this, p').click(function() { $(this).slideToggle("fast"); }); – Elron May 23 '20 at 16:17
I still can see it only once when clicked, just the first time..have a look. I replace the line you suggested me.. have a look (https://codepen.io/cat999/project/editor/AEeEdg) – Marlene Rodrigues May 23 '20 at 16:19
It works. clicking on "home page" opens the slide, clicking on the purple background or text closes the slide. Isn't it how it should work? – Elron May 23 '20 at 16:20
Should be: clicking on "home page" opens the slide, have the purple background or text closes the slide... but when i click again the pruple background is missing.. – Marlene Rodrigues May 23 '20 at 16:22
It worked just a minute ago. Do what you did and it should work. – Elron May 23 '20 at 16:25
Thanks anyway Elron but did not worked... Is still visible only the first time. Now all your suggestion are in exept for $('.animate-this, p').click(function() { $(this).slideToggle("fast"); }); – that is creating a different animation – Marlene Rodrigues May 23 '20 at 16:28
Right, sorry, $(this) is not what you need. I see that it works: https://i.imgur.com/sxcMrwu.gif – Elron May 23 '20 at 16:31
here what i got unfortunately. I'm running on chrome https://pasteboard.co/J9J95Z5.gif . I try to not clicked immediately to simulate all the animation transition from page to page – Marlene Rodrigues May 23 '20 at 16:44
Of course, it will redirect to a different page since you are clicking a link. Do you want to disable that link? – Elron May 23 '20 at 19:14
if so, try changing href attribute to this: ``. you can read more about it here: https://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false – Elron May 23 '20 at 20:05

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

1 Answers1