Showing a previously hidden bootstrap alert

Question

This is a simple Bootstrap alert:

<div id="alert_recover_ok" class="alert alert-success hidden">
    <a class="close" data-dismiss="alert" href="#">&#x2716;</a>
    Please check your email for recovery instructions
</div>

As you can see, it is hidden (by classname). Now I'm trying to show it:

$('#alert_recover_ok').fadeIn();

Nothing happens... The only solution that seems to be working is:

$('#alert_recover_ok').removeClass('hidden');

...but of course, that won't have the nice fade in effect. Any ideas?

Answer 1

Create your own hidden class.

The bootstrap .hidden class is as follows, which is why just .fadeIn(); wont work...

.hidden {
    display: none!important;
    visibility: hidden!important;
}

So you can create your own hidden class.

.hide-me{
    display: none;
}

Use this instead of hidden and then the .fadeIn(); will work.

DEMO

Answer 2

This is happening because fadeIn() doesn't remove your class, which continues to hide the element.

This is a kludge, but it should work:

$('#alert_recover_ok').removeClass('hidden').hide().fadeIn();

Answer 3

Remove .hidden class from bootstrap css and write your own custom hidden class like following ..

.hidden{display:none;}