Long story short - check the question title :)
I'm working on a nav for my project, and recently I've encountered a strange error. Here's a little background:
I want some custom animated hide/reveal behavior implemented, so simply using jQuery 1.10
show()
andhide()
methods won't suffice: I'm toggling a class on the element in question.The class I toggle is called
.hidden
. It's used along with the class.toReveal
to avoid having to setoverflow:hidden;
to each of the items I want revealed. I've also mentioned I'm going for animated hide/reveal behavior, so I'll provide the relevant CSS:
*{-webkit-transition:0.3s all;-moz-transition:0.3s all;} .hidden, .hidden * { padding-top:0 !important; padding-bottom:0 !important; margin-top:0 !important; margin-bottom:0 !important; height:0 !important; border-top-width:0 !important; border-bottom-width:0 !important; } .toReveal, .toReveal * { overflow:hidden; height:auto; }
So the experience I get is rather strange: when I expand the hidden element - the transition is going as planned. But when I try to hide the element - the transition doesn't happen.
I've found little traces of what's actually causing the trouble: if I remove height:0 !important;
line from the code - the transition does happen, but the element doesn't collapse, while collapsing is the whole point of this :)
Here's a jsFiddle to the simplified prototype: http://jsfiddle.net/KCAHe/
Steps to see the desired behavior:
- Click on dev/local
- Advanced button will appear: click on sandbox
Steps to reproduce the issue:
- Click on dev/local Keep clicking on Advanced