43

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.

3
  • Any css selector in a jQuery function $() will find elements matching that selector. div, .class_name, #elem etc. It'll even do special selectors like attribute selectors [id="id_name"] or *. Just think of it as a css selector and you should feel more creative using it.
    – Kevin Beal
    Jun 28, 2013 at 5:19
  • can you provide fiddle to reproduce your problem? Jun 28, 2013 at 5:21
  • I commented below; I misspelled <script src="http://code.jquery.com/jquery.js"></script> in my header (which is why nothing from jQuery was working).
    – royhowie
    Jun 28, 2013 at 5:22

12 Answers 12

75

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.

3
  • Okay. Let me explain: If you use the default way (the one provided by twitter bootstrap), you remove the alert entirely (meaning it cannot be called again). I know how to call by id selector, but it doesn't seem to work with the bootstrap alerts (so far it only works if you call them by class, not by alert—unless I'm doing something entirely wrong).
    – royhowie
    Jun 28, 2013 at 5:17
  • if it works with class . then i am sure it should work with id selector #.. make sure there is nothing that is breaking this code.. and yes... make sure all your ids is unique
    – bipen
    Jun 28, 2013 at 5:22
  • ignore the above, just look at my post below
    – royhowie
    Jun 28, 2013 at 5:23
56

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>
3
  • creative way to re-use Bootstraps classes.
    – klewis
    Mar 12, 2016 at 17:30
  • .collapse sets "visibility:none". If you do that, the .show() method will not work because it sets display:block and doesn't change visibility. The Bootstrap class "hidden" also sets visibility:none, so this is also not a workable solution I think @william.eyidi did it better, but rather use a simple class instead of an inline style.
    – Adam Hey
    Jul 18, 2017 at 18:46
  • 5
    @AdamHey Your comment seems to be incorrect as of v4 at least. The css class collapse sets display: none, and the jQuery .show() method sets an inline style of display: block overriding the display: none from the collapse css class. Therefore, it works as described above.
    – crush
    Mar 8, 2018 at 17:01
21

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();
1
  • 5
    do you mean display: none; ?
    – Ehsan
    Mar 11, 2015 at 12:04
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');
4

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>
  
 
  

3

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

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

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!

1
  • 3
    It's good that you found the actual cause. FYI.. If you are using any javacript/jquery codes and if those are not working, use Firebug in chrome or firefox or developer tool in ie to check whether there is any error in the script.
    – Ravimallya
    Jun 28, 2013 at 13:03
2

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

Use the id selector #

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

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.

0

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>
0

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

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.