How to toggle a divs visibility by using a button click?

Question

Below is the JS code to show a div when clicked on a button:

<script type="text/javascript">

var _hidediv = null;

function showdiv(id) {

    if(_hidediv)

        _hidediv();

    var div = document.getElementById(id);

    div.style.display = 'block';

    _hidediv = function () { div.style.display = 'none'; };

}

</script>

I want to hide it when clicked again and when div should be visible when I click it. Can anyone tell me how to do it?

Answer 1

Below is the HTML code:

<a id="button" href="#">Show/Hide</a>

<div id="item">Item</div>

Check out the below JQuery script: 

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

    $( "#item" ).toggle();

});

Interested in Java? Check out this Java tutorial by Intellipaat.