# Display property explanation plz

**URL:** <https://forum.kirupa.com/t/display-property-explanation-plz/277180>\
**Category:** web dev\
**Created:** [December 9, 2008, 4:01am UTC](https://forum.kirupa.com/t/display-property-explanation-plz/277180 "2008-12-09T04:01:54Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Elvyne963](https://avatars.discourse-cdn.com/v4/letter/e/71e660/32.png) [@Elvyne963](https://forum.kirupa.com/u/Elvyne963)\
**Post date:** [December 9, 2008, 4:01am UTC](https://forum.kirupa.com/t/display-property-explanation-plz/277180/1 "2008-12-09T04:01:54Z")

</div>

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.

> ```
> &lt;script language="JavaScript"&gt;  
> 
> ```

```
  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 &lt; 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 !