Javascript: Show/Hide HTML elements

Here, I will be demonstrating on showing or hiding a div when a link is clicked. I have done this with Javascript and CSS.

I have called showHideDiv() Js function when the link is clicked. The display of the div where content is present, is visible or hidden on each click. For this, CSS styling is used (display: none).

The code follows:



<div>
    <a onclick="showHideDiv()" style="cursor:pointer">Show / Hide</a>
    <div id="addTag" style="display:none">This is a test.</div>
</div>

<script type="text/javascript" language="javascript">
    function showHideDiv()
    {
        if(document.getElementById('addTag').style.display == "none") {
            document.getElementById('addTag').style.display = "";
        }
        else {
            document.getElementById('addTag').style.display = "none";
        }
    }
</script>

Hope it helps. Thanks.