CODEWITHSUNDEEP
jquerycsstwitter-bootstrapalert
Andres SK
Andres SK

Reputation: 10974

Showing a previously hidden bootstrap alert

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?

Upvotes: 3

Views: 3478

Answers (3)

Hasib Tarafder
Hasib Tarafder

Reputation: 5813

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

.hidden{display:none;}

Upvotes: 1

Schmalzy
Schmalzy

Reputation: 17324

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

Upvotes: 5

cssyphus
cssyphus

Reputation: 40038

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();

Upvotes: 1

Related Questions