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

I had the same problem. I used this patch:

$(function() {
  $('.hidden').hide().removeClass('hidden');
});

Then I had another problem, since my application generates new elements and append/prepend them. What I finally did is after genereting the new element I do:

var newEl = ...;
$(newEl).find('.hidden').hide().removeClass('hidden');

For me it was because bootstrap is using the !important hack for both class hide and hidden.

So you can't use the show() etc methods provided with jquery. Instead you have to overwrite even more horrible code overwriting the hacky code.

$('#myelement').attr('style', 'display: block !important');

!important is a last resort option and really shouldn't be used in a core library like bootstrap.

This works, but I'm going to try the first answer and change the classes to .collapse.

.toggleClass('hidden')