Is there a way to make a div appear when a user clicks a hyperlink, and then disappear when clicked again? Currently, the div remains visible even after clicking the hyperlink multiple times. Here is an example:
HTML
<a onclick="showDiv()" id="ShowAboutButton">What's This?</a>
<div id="About">
</div>
CSS
#ShowAboutButton {
text-align: center;
margin-top: 40px;
background-color: white;
border: none;
cursor: pointer;
font-family: "Lato Light";
font-size: 22px;
}
#About {
width: 900px;
height: 600px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
background-color: gray;
display: none;
transition: height 2s;
}
Javascript
function showDiv() {
document.getElementById('About').style.display = "block";
}
If possible, could someone demonstrate how to create a sliding effect for the div when the hyperlink is clicked - appearing with a slide in transition, and disappearing with a slide out transition on subsequent clicks? Any assistance would be greatly appreciated. Thank you!