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>

Answer 1

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>

Answer 2

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>