How can I show/hide a specific alert with twitter bootstrap?

Question

Here's an example of an alert I'm using:

<div class="alert alert-error" id="passwordsNoMatchRegister">   <span>     <p>Looks like the passwords you entered don't match!</p>   </span> </div> 

I know that $(".alert").show() and $(".alert").hide() will show/hide all the elements of the .alert class. However, I cannot figure out how to hide a specific alert, given its id.

I want to avoid using .alert("close"), since that permanently removes the alert, and I need to be able to recall it.

Answer 1

You need to use an id selector:

 //show  $('#passwordsNoMatchRegister').show();  //hide  $('#passwordsNoMatchRegister').hide(); 

# is an id selector and passwordsNoMatchRegister is the id of the div.

Answer 2

Add the "collapse" class to the alert div and the alert will be "collapsed" (hidden) by default. You can still call it using "show"

<div class="alert alert-error collapse" role="alert" id="passwordsNoMatchRegister">   <span>   <p>Looks like the passwords you entered don't match!</p>   </span> </div>