title: Collapsing JavaScript/HTML div on page load?
body: <p>I need help collapsing a collapsible div on page load.</p>
  
  <p>I'm using this JavaScript code:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      function switchMenu(obj) {
          var el = document.getElementById(obj);
          if ( el.style.display != "none" ) {
              el.style.display = 'none';
          }
          else {
              el.style.display = '';
          }
      }
      document.getElementById('aboutme').style.display = 'none';
  &lt;/script&gt;
  </code></pre>
  
  <p>to collapse HTML div id="aboutme" when the <code>&lt;a ...&gt;about me&lt;/a&gt;</code> is clicked:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;a href="#" onclick="switchMenu('aboutme');"&gt;about me&lt;/a&gt;
      &lt;div id="aboutme"&gt;
          sample text to be expanded and collapsed
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I can't get the page to close my <code>div#aboutme</code> on page load.</p>
  
  <p>I want this page to load with my div collapsed.</p>
  
  <p>I thought that the JS line</p>
  
  <pre><code>document.getElementById('aboutme').style.display = 'none';
  </code></pre>
  
  <p>should do the trick but it doesn't. What am I doing wrong?</p>
  
  <p>Thanks for your help.</p>