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

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.

JS

        function showAlert(){
         $('#alert').show();
         setTimeout(function() { 
             $('#alert').hide(); 
         }, 5000);
        }

HTML

<div class="alert alert-success" id="alert" role="alert" style="display:none;" >YOUR MESSAGE</div>

Use the id selector #

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

I use this alert

function myFunction() {_x000D_
   $('#passwordsNoMatchRegister').fadeIn(1000);_x000D_
   setTimeout(function() { _x000D_
       $('#passwordsNoMatchRegister').fadeOut(1000); _x000D_
   }, 5000);_x000D_
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">_x000D_
  <script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>_x000D_
_x000D_
_x000D_
<button onclick="myFunction()">Try it</button> _x000D_
_x000D_
_x000D_
<div class="alert alert-danger" id="passwordsNoMatchRegister" style="display:none;">_x000D_
    <strong>Error!</strong> Looks like the passwords you entered don't match!_x000D_
  </div>_x000D_
  _x000D_
 _x000D_
  

On top of all the previous answers, dont forget to hide your alert before using it with a simple style="display:none;"

<div class="alert alert-success" id="passwordsNoMatchRegister" role="alert" style="display:none;" >Message of the Alert</div>

Then use either:

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

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

$('#passwordsNoMatchRegister').slideDown();

For all of you who answered correctly with the jQuery method of $('#idnamehere').show()/.hide(), thank you.

It seems <script src="http://code.jquery.com/jquery.js"></script> was misspelled in my header (which would explain why no alert calls were working on that page).

Thanks a million, though, and sorry for wasting your time!

Just use the ID instead of the class?? I dont really understand why you would ask though when it looks like you know Jquery ?

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

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

I use this alert

<div class="alert alert-error hidden" id="successfulSave">
  <span>
    <p>Success! Result Saved.</p>
  </span>
</div>

repeatedly on a page each time a user updates a result successfully:

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

to re-hide it, I call

$('#successfulSave').addClass('hidden');

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>

I had this problem today, was in a lot of time crunch, so below idea worked:

• setTimeout with 1 sec -- call a function that shows the div
• setTimeout with 10 sec -- call a function that hides the div

Fade is not there, but that bootstrap feeling will be there.

Hope that helps.

You can simply use id(#)selector like this.

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