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

To show/ hide you could do this like in the accepted answer:

I've had the same problem: just don't use the data-dismiss from the close button and work with JQuery show() and hide():

$('.close').click(function() {
$('.alert').hide();
  })

Now you can show the alert when clicking a button by using the code:

$('.alert').show()

Hope this helps!

Or what Was trying to do was make a colapsable alert that would colapse the alert and still show the header for example. i did this so i could make it position:fixed; and then show the other content content. However this was hard to do so i created a work around. When you click the dismiss button it would set the popup display:none; and then at first when its at the top you may need to prevent it from initially covering content so i added line breaks that would show/hide in acordance with the display of the Alert. so 2 alerts that one when you click the dismiss, display:none; and then show the other popup that has just a single line of content. when this popup was clicked it would set the main alert to display:block; as well as the line breaks in acoridance. Here is the code, now that the explenation is done:

function ShowALERT() { 
  document.getElementById('ALERT').style.display = "block";
	document.getElementById('ShowALERT').style.display = "none";
	document.getElementById('breakShowALERT').style.display = "none";
	document.getElementById('breakALERT').style.display = "block";
	
}
function closeALERT() { 
   document.getElementById('ALERT').style.display = "none";
document.getElementById('breakShowALERT').style.display = "block";
  document.getElementById('ShowALERT').style.display = "block";
document.getElementById('breakALERT').style.display = "none";
	
}

#ALERT {
	position:fixed;
	display:block;
	width:100%;
	z-index:1;
	left:0px;
	top:0px;
	
	}
  #ShowALERT {
position: fixed;
display:none;
z-index:1;
top:0px;
left:0px;
width: 100%;
}
#breakShowALERT {
display:none;
}
	#breakALERT {
display:block;
}

     

	  
 Important Alert



   

 Dismiss
 
Note: Alert Content here......................

 
 
 






					



 
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content