This is mixing two different ways to hide/show. Why?
I'd say pick one.
- Hide/show using .hide()/.show()
- Hide/show using display:none or by
applying a class (which uses display:none)
(optionally with some CSS animation).
I prefer to always just apply a class, because then I can easily
re-define the CSS. I never use .hide()/.show(). It uses
old/slow/clunky Javascript animation code.
The problem here is that when you use .hide()/.show() that code
expects to manage the inline styles (at least display:) You shouldn't
mess with the inline styles yourself then. (Though, if the jQuery core
code is properly-written, you should be able to set/remove styles that
are not used by
.hide()/.show() )
I'd consider .hide()/.show() to be a
"legacy feature". This is not the best way to go about this today.