Display property explanation plz

programming web dev
1

Hi, I succeded to use a code I found on a site to display and hide div tag, but I don’t understand how it work exactly though, so I was wondering if someone could explain me why is it so important that the “display:none” property has to be in the div tag it self and not only in the CSS in the head of the page.

<script language="JavaScript">  

  var divs_array = new Array("div1", "div2");

function display(id)
{
if (document.getElementById(id).style.display==“”)
{
document.getElementById(id).style.display = “none”;
return;
}

    for ( i = 0; i < divs_array.length; i++ )
    {
            var my_div = document.getElementById(divs_array*);

    my_div.style.display = "none";
}

document.getElementById(id).style.display = "";

}
</script>

<style type=“text/css”>

</style>
</head>

<body>
<a href=“#” onClick=“display(‘div1’);return false;”>div1</a><br />
<a href=“#” onClick=“display(‘div2’);return false;”>div2</a><br />

<div id=“div1” style=“display:none;”>Content div1</div>
<div id=“div2” style=“display:none;”>Content div2</div>

Other question. If for exemple, we already clicked on the div1, and that the div1 content is displayed, and I want that even if you click again on the link div1, the content of div1 doesn’t disappear, what would I have to add ?

Thx in advance !