How to show and hide an alert in Bootstrap

Question

How could I show and hide a Bootstrap alert?

I have tried using $().alert("open") but that seems unable to solve the problem:

// Hide the alert when DOM loads:
$("#alert").alert("close");

// Show alert on given info click:
$("#info").click(function() {
  console.log("Got clicked");
  $("#alert").alert();
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<form>
  <div class="form-group">
    <label class="" for="">
      Checkbox&nbsp;<span class="glyphicon glyphicon-info-sign" id="info"></span>
    </label>
    <div class="checkbox">
      <label>
        <input type="checkbox" id="" value="option1" aria-label="..."> Sample
      </label>
    </div>
  </div>
  <div class="alert alert-info alert-dismissible" role="alert" id="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <strong>Note: </strong> Test... and that is that. <a href="#" class="alert-link">More info</a>
  </div>
</form>

Bootstrap provides method(s) to close the alert, but not to (re-)open these. I could simply choose to use $.show() and $.hide(), but is this the supposed way?

I would not be able to use data-dismiss="alert" anymore:

//$("#alert").alert("close");
$("#alert").hide();

$("#info").click(function() {
  console.log("Got clicked");
  $("#alert").show();
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<form>
  <div class="form-group">
    <label class="" for="">
      Checkbox&nbsp;<span class="glyphicon glyphicon-info-sign" id="info"></span>
    </label>
    <div class="checkbox">
      <label>
        <input type="checkbox" id="" value="option1" aria-label="..."> Sample
      </label>
    </div>
  </div>
  <div class="alert alert-info alert-dismissible" role="alert" id="alert">
    <button type="button" class="close" onclick="$('#alert').hide();" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <strong>Note: </strong> Test... and that is that. <a href="#" class="alert-link">More info</a>
  </div>
</form>

I think you are confusing JQuery and Bootstrap. All Bootstrap does is provide styling for regular `alert`s. JQuery provides `$().show/hide`. The Browser Object Model provides the `window` object, which `alert()` is a method. — Scott Marcus, Jul 29 '19 at 12:32
But the `data-dismiss` ain't JQuery? That's an HTML attribute used by Bootstrap to run the JQuery `$().alert()` functionality? — Barrosy, Jul 29 '19 at 12:35
No. The attribute just provides styling. The JavaScript is all JQery. — Scott Marcus, Jul 29 '19 at 12:37
I think the shortest possible way would be to simply use something like `onclick="$(....).toggle()"`. Also note to write `onclick` with small `c`, some (older) browsers have problems with wrong case spelling. — Daniel W., Jul 29 '19 at 12:40
From the docs: `$().alert('close')` **Closes an alert by removing it from the DOM.** If the `.fade` and `.in` classes are present on the element, the alert will fade out before it is removed. _Disclaimer: emphasis mine_ — Fr0zenFyr, Jul 29 '19 at 12:41
@ScottMarcus But in this [JSFiddle](https://jsfiddle.net/f9p3vnxt/1/) you could clearly see there is no JavaScript concerning closing of the alert and yet it closes. When I remove `data-dismiss="alert"` this closing function does not seem to get triggered. — Barrosy, Jul 29 '19 at 12:42
Possible duplicate: [Bootstrap Alert - show then hide - cannot show again](https://stackoverflow.com/questions/44993265/bootstrap-alert-show-then-hide-cannot-show-again) — Fr0zenFyr, Jul 29 '19 at 12:43
My question was whether I am supposed to create my own code for such functionality if I want to work according to Bootstrap provided functionalities (and/or attributes). The provided duplicate does provide a perfect solution to my problem however (which was something I came up with in my second example code). — Barrosy, Jul 29 '19 at 12:48
@Barrosy opening/closing is really the same as showing/hiding, which can be accomplished with CSS alone. Bootstrap is the CSS part. — Scott Marcus, Jul 29 '19 at 12:48
@Barrosy if you check the [bootstrap js file](https://github.com/twbs/bootstrap/blob/08cc5c3961f89e37a0d314a2b99cb0fc03f11a09/js/alert.js#L18), you can see why that happens (`data-dismiss="alert"` is able to close the alert) — Fr0zenFyr, Jul 29 '19 at 12:50
@Barrosy the answer to your last question in comments is **yes**. Bootstrap alert doesn't do much more than flash your message and the remove the (`.alert`) container element from DOM. You can do whatever you want with it (like your 2nd example code block), I don't think it will in anyway harm the DOM (of course unless you do some crazy stuff) — Fr0zenFyr, Jul 29 '19 at 12:55
For example, I'd not use `.alert-dismissable` on the (`.alert`) message container and use `id="my-alert-toggler"` and capture click events on it to `show()/hide()` instead of `.alert('close')` (which removes the container from DOM). — Fr0zenFyr, Jul 29 '19 at 12:59
I was aware of the fact that `.alert('close')` removes it from the DOM (maybe I should have added that to my question as well) I will see what I can do with what you just shared. — Barrosy, Jul 29 '19 at 14:17

Deepu Reghunath · Answer 1 · 2019-07-30T11:26:09.700

4

you can use only show method to achieve this.

//$("#alert").alert("close");

$("#info").click(function() {
  $("#alert").show();
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<form>
  <div class="form-group">
    <label class="" for="">
      Checkbox&nbsp;<span class="glyphicon glyphicon-info-sign" id="info"></span>
    </label>
    <div class="checkbox">
      <label>
        <input type="checkbox" id="" value="option1" aria-label="..."> Sample
      </label>
    </div>
  </div>
  <div class="alert alert-info alert-dismissible" role="alert" id="alert" hidden>
    <button type="button" class="close" onClick="$('#alert').hide();" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <strong>Note: </strong> Test... and that is that. <a href="#" class="alert-link">More info</a>
  </div>
</form>

edited Jul 30 '19 at 11:26

answered Jul 29 '19 at 12:34

Deepu Reghunath

8,132
2
38
47

Isn't this the same as what I provided in my last solution, except that of using `$().show()` you are using `$().toggle()`? – Barrosy Jul 29 '19 at 12:37
I was not looking for the fade effect, I was looking for an answer to the question: How am I supposed to show and hide an alert using Bootstrap standards? Apparently according to Fr0zenFyr's duplicate I am supposed to write my own javascript (which I already provided in my question). By the way, the fade you tried to add is creating a bug (spam click the info button and you will notice that the alert will disappear once it is being opened). – Barrosy Jul 29 '19 at 12:51
why do want to hide the existing alert and then show it again? If it is already showing no need to hide it. No reopen method in bootstrap. Simply use `show` method. – Deepu Reghunath Jul 30 '19 at 12:09

jsadev.net · Answer 2 · 2019-08-02T07:10:34.110

There is a way to get this done using bootstrap only. For this you have to use bootstraps collapse.

to get rid of the collapsing-animation you coud add the following css:

.alert.collapsing {
    -webkit-transition: none;
    transition: none;
    display: none;
}

To learn more about collapsing take a look at its documentation.

.alert.collapsing {
    -webkit-transition: none;
    transition: none;
    display: none;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<form>
  <div class="form-group">
    <label class="" for="">
      Checkbox&nbsp;<span class="glyphicon glyphicon-info-sign" id="info" data-toggle="collapse" href="#alert"></span>
    </label>
    <div class="checkbox">
      <label>
        <input type="checkbox" id="" value="option1" aria-label="..."> Sample
      </label>
    </div>
  </div>
  <div class="alert alert-info alert-dismissible collapse" role="alert" id="alert">
    <button type="button" class="close" data-toggle="collapse" href="#alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <strong>Note: </strong> Test... and that is that. <a href="#" class="alert-link">More info</a>
  </div>
</form>

How to show and hide an alert in Bootstrap

2 Answers2