TheYaXxE TheYaXxE - 8 months ago 27
HTML Question

Prevent elements in hidden div to be 'clickable'

I am creating a site, where you can click a button, and a little panel will show. (Like the notification/message panel on facebook)

The function works fine, but when the panel is hidden, you can still hover the links, where they are supposed to be, when visible. I am using

to hide my div, so I can make a nice fade-in-out-animation.

Here's all my code with a working example of the function:

I have tried to put in a
height: 0; overflow: hidden;
when not visible, and
height: auto; overflow: visible;
when visible, and leave them out of the animation by doing this:
transition: top 0.15s, opacity 0.15s

It works fine, when the panel is shown, but when you want to hide it agian it does not. See this example:

So my question is basicly; How do I prevent the elements in my hidden div to be 'clickable' and still keep my fade-in-out animations?

Hope someone can help me :D

  • Thanks


A couple of pointers:

You could make something like:


// either hide the box using css OR on initialization: