How do I change the CSS property "display" in javascript
<p>How do I change the CSS property <code>display</code>, in JavaScript, from <code>display:none</code> to <code>display:normal</code> for these divs?</p>

<pre class="lang-css prettyprint-override"><code>#hide_0 { display:none }
#hide_1 { display:none }
#hide_2 { display:none }
#hide_3 { display:none }
#hide_4 { display:none }
#hide_5 { display:none }
</code></pre>

<p>Only one at a time.  I need to display one and hide the rest.</p>

<p>What I used:</p>

<pre><code>var persistent_element='hide_1';

function link_update(link_display)
  {
  var local_element;
  local_element=document.getElementById(persistent_element);  
  local_element.style.display='none';
  local_element=document.getElementById(link_display);
  local_element.style.display='block';
  persistent_element=link_display;
  }
</code></pre>

<p>How I connected it : m4 is a minified - connects onclick to these methods</p>

<pre><code>m4('l1',function {return link_update(hide_1);}); 
m4('l2',function {return link_update(hide_2);});
m4('l3',function {return link_update(hide_3);});
m4('l4',function {return link_update(hide_4);});
m4('l5',function {return link_update(hide_5);});
m4('l6',function {return link_update(hide_6);});
</code></pre>
