jQuery show() for Twitter Bootstrap css class hidden

Question

I'm using Twitter Bootstrap and I notice that jQuery show() or fadeIn() doesn't make DOM element marked with class hidden appear because the jQuery functions only remove the display: none specification. However, the visibility is still set to hidden.

I wonder what is the best possible way to work around this?

1. Remove the hidden class on the element
2. Change the visibility property
3. Overwrite the hidden class in my own css

In particular, I want to know whether fixing this with jQuery or css is better and why.

Answer 1

The css class you're looking for is .collapse. This sets the element to display: none;

So using $('#myelement').show() will work properly.

UPDATE : Bootstrap v3.3.6 has updated .collapse back to:

.collapse {   display: none; } 

Answer 2

This will fade your invisible element in and remove the class

$('#element.hidden').css('visibility','visible').hide().fadeIn().removeClass('hidden'); 

http://jsfiddle.net/7qxVL/

If you don't really need the element to be invisible (ie take up the space) tho you might wanna redefine .hidden (in you local css, don't change bootstrap source, or even better, in your local LESS file).