'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.

javascriptjqueryhtmltwitter-bootstrap


Solution 1:[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.

Solution 2:[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>

Solution 3:[3]

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

Solution 4:[4]

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

Solution 5:[5]

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

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

Solution 6:[6]

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!

Solution 7:[7]

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

Solution 8:[8]

I use this alert 

function myFunction() {
   $('#passwordsNoMatchRegister').fadeIn(1000);
   setTimeout(function() { 
       $('#passwordsNoMatchRegister').fadeOut(1000); 
   }, 5000);
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<button onclick="myFunction()">Try it</button> 


<div class="alert alert-danger" id="passwordsNoMatchRegister" style="display:none;">
    <strong>Error!</strong> Looks like the passwords you entered don't match!
  </div>

Solution 9:[9]

Use the id selector #

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

Solution 10:[10]

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.

Solution 11:[11]

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>

Solution 12:[12]

I found that if you have 'd-flex' in your class, the alert will not hide.

I had:

class="alert alert-danger d-flex align-items-center"

I replaced it with:

class="alert alert-danger align-items-center"

jQuery:

$('#MyAlert').hide()

Related Questions