title: Expand Collapse Menu in JavaScript HTML
body: <p>I have found this code to make a menu that collapses when the user clicks on the minus sign within a page. But the menu shows all the contents within the Main Item when the page first loads. I would like to make the page show just the Main Item when the page loads. This is the code: </p>
  
  <pre><code>    &lt;script langauge="JavaScript" type="text/javascript"&gt;
  function doMenu(item) {
   obj=document.getElementById(item);
   col=document.getElementById("x" + item);
   if (obj.style.display=="none") {
    obj.style.display="block";
    col.innerHTML="[-]";
   }
   else {
    obj.style.display="none";
    col.innerHTML="[+]";
   }
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;a href="JavaScript:doMenu('main');" id=xmain&gt;[+]&lt;/a&gt; Main Item
  &lt;div id=main style="margin-left:1em"&gt;
   &lt;a href=#&gt;Item 1&lt;/a&gt;&lt;br&gt;
   &lt;a href=#&gt;Item 2&lt;/a&gt;&lt;br&gt;
   &lt;a href=#&gt;Item 3&lt;/a&gt;
  &lt;/div&gt;
  &lt;br&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I would be very grateful if someone could show me how to change the code to do this. </p>
  
  <p>Thanks</p>