How do I make a div hidden by default using javascript?

Question

I am using the following code to toggle visibility of a div area:

 <script type="text/javascript">
function toggle_visibility(id) {
   var e = document.getElementById(id);
   if(e.style.display == 'block')
      e.style.display = 'none';
   else
      e.style.display = 'block';
}
 </script>

To toggle it, I am using onclick="toggle_visibility('id_of_element_to_toggle');"

The part that I don't like is that this makes it visible by default when the page loads. How can I make it hidden by default until it is toggled to be visible? I'd like to do this in the same javascript block if possible. The simpler the better.

How can I toggle the visibility of 2 divs at once? To make them switch.

Answer 1

You need to call it:

<script type="text/javascript">

toggle_visibility('id_of_element_to_toggle');

function toggle_visibility(id) {
   var e = document.getElementById(id);
   if(e.style.display == 'block')
      e.style.display = 'none';
   else
      e.style.display = 'block';
}
 </script>

You could add some CSS too:

#id_of_element_to_toggle{display:none;}

Performance will be faster with CSS.