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=".4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src=".3.1/jquery.min.js"></script>
<script src=".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>

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./bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn./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./bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn./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>

• javascript
• jquery
• html
• twitter-bootstrap-3

• I think you are confusing JQuery and Bootstrap. All Bootstrap does is provide styling for regular alerts. JQuery provides $().show/hide. The Browser Object Model provides the window object, which alert() is a method. – Scott Marcus Commented Jul 29, 2019 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 Commented Jul 29, 2019 at 12:35
• No. The attribute just provides styling. The JavaScript is all JQery. – Scott Marcus Commented Jul 29, 2019 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. Commented Jul 29, 2019 at 12:40
• 1 @Barrosy the answer to your last question in ments 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 Commented Jul 29, 2019 at 12:55

2 Answers 2

you can use only show method to achieve this.

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

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

<link href="https://stackpath.bootstrapcdn./bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn./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>

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./bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn./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>