jQuery show() for Twitter Bootstrap css class hidden

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.

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;
}

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).

Warning:

bootstrap 3.3.0 just changed .collapse to:

.collapse {
  display: none;
  visibility: hidden;
}

Which is a breaking change for jQuery.show() I had to revert back to inlining:

<div class="alert alert-danger" style="display:none;" >
</div>      

to continue using jQuery as follows:

$('.alert').html("Change a few things up and try submitting again.").show()

The only class I could find in bootstrap 3.3.0 to apply just 'display:none' is

.navbar {
  display: none;
}