How to toggle a bootstrap alert on and off with button click?

Question

I want to display an alert box multiple times with a button click event without having to refresh the page but the alert box only shows up once. If I want to show the alert box

Answer 1

Actually you should consider using something like this :

$('#the-thing-that-opens-your-alert').click(function () {
  $('#le-alert').addClass('in'); // shows alert with Bootstrap CSS3 implem
});

$('.close').click(function () {
  $(this).parent().removeClass('in'); // hides alert with Bootstrap CSS3 implem
});

As bootstrap fade/in uses CSS3 instead of Jquery hide/show in full Javascript. My point is that on mobile devices, CSS3 is faster than Js.

And your HTML should looks like this:

Open my alert


  ×
  
Alert title
  
Roses are red, violets are blue...

And this is pretty cool ! Check it in jsFiddle =)