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.

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 '13 at 05:19
I commented below; I misspelled `` in my header (which is why nothing from jQuery was working). — royhowie, Jun 28 '13 at 05:22

score 75 · Accepted Answer · edited Jan 27 '20 at 19:07

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.

edited Jan 27 '20 at 19:07

Ghassen

1,039
12
27

answered Jun 28 '13 at 05:15

bipen

36,319
9
49
62

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 '13 at 05: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 '13 at 05:22
ignore the above, just look at my post below – royhowie Jun 28 '13 at 05:23

score 56 · Answer 2 · answered Sep 29 '14 at 20:12

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>

answered Sep 29 '14 at 20:12

Mike

561
4
2

creative way to re-use Bootstraps classes. – klewis Mar 12 '16 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 '17 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 08 '18 at 17:01

score 20 · Answer 3 · edited Sep 13 '16 at 18:27

20

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

edited Sep 13 '16 at 18:27

WolfieeifloW

605
1
8
28

answered Feb 09 '15 at 18:35

william.eyidi

2,315
4
27
39

5

do you mean display: none; ? – Ehsan Mar 11 '15 at 12:04

score 4 · Answer 4 · answered Jan 18 '17 at 20:07

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

score 4 · Answer 5 · answered Jun 08 '18 at 11:33

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>

score 3 · Answer 6 · edited Jun 28 '13 at 05:19

3

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

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

edited Jun 28 '13 at 05:19

muneebShabbir

2,500
4
29
46

answered Jun 28 '13 at 05:17

aman

97
1
1
8

royhowie · Answer 7 · 2014-10-27T04:45:18.197

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!

edited Oct 27 '14 at 04:45

answered Jun 28 '13 at 05:21

royhowie

11,075
14
50
67

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 '13 at 13:03

score 2 · Answer 8 · answered Jun 28 '13 at 05:17

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

answered Jun 28 '13 at 05:17

Kylie

11,421
11
47
78

score 1 · Answer 9 · answered Jun 28 '13 at 05:15

1

Use the id selector #

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

answered Jun 28 '13 at 05:15

omma2289

54,161
8
64
68

score 0 · Answer 10 · answered Nov 18 '19 at 12:04

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.

score 0 · Answer 11 · edited Feb 28 '22 at 16:09

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>

edited Feb 28 '22 at 16:09

masud_moni

1,121
16
33

answered Mar 19 '20 at 10:39

Ali Akram

4,803
3
29
38

YSL · Answer 12 · 2022-03-22T12:23:33.880

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

edited Mar 22 '22 at 12:23

answered Mar 21 '22 at 14:05

YSL

21
4

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

12 Answers12