如何使div在一次单击超链接时出现并在再次单击超链接时消失？ 可以重复吗？

Question

I am looking for a way to have a div appear after the user clicks a hyperlink, and then have that same div disappear when the user clicks it again. Currently, the user is only able to have the div appear when the hyperlink is pressed, but when you click the hyperlink again, the div remains in it's "display: block;" state. Here is what I mean:

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 it is at all possible, can someone please show me how to give the user the ability to click the hyperlink and have the div slide in with a transition effect, and then when the hyperlink is clicked again have it slide back out with a transition effect? Any help would be much appreciated! Thank you in advance!

Answer 1

You can do this very easily with jquery slideToggle :

$("#ShowAboutButton").click(function(){

    $("#About").slideToggle();

});

JSFIDDLE

Answer 2

$('#ShowAboutButton').click(function() {
    $('#About').toggle();
});

Answer 3

OOPS. Missed top of your code.

<a onclick="showDiv(document.getElementById('About'))" id="ShowAboutButton">What's This?   

 <div id="About">
 </div> 

 function showDiv(obj) {
    if(obj.style.display == "block"){
     obj.style.display='none'
    }
    else(obj.style.display == "none"){
     obj.style.display='block'
    }
 }  

Answer 4

Vanilla JavaScript :

var about = document.getElementById('About');
about.style.display='none';

document.getElementById('ShowAboutButton').addEventListener('click', function() {
  //Toggling
  if(about.style.display != 'block') {
return about.style.display='block';
  }
  about.style.display = 'none';

});