title: Javascript - Loading Multiple functions onLoad
body: <p>I started learning javascript this week and I'm getting my head round the basics. I've started building what will be a &quot;FAQ&quot; section for a page that uses a toggle switch to open and close target divs.</p>
  <p>However, by default the div's display is set to visible. I've put a function in that will set this to hidden, so that the dropdown's are collapsed on page load. I've tried stacking them (the toggle function, and display functions), separating them with a semi-colon within &quot;onLoad&quot; in the body tag.</p>
  <p>Now, before I applied these functions to run &quot;onLoad&quot; both worked fine. However now only the 2nd function works that toggles the divs, but the function stating to have the divs collapsed onLoad is not.</p>
  <p>Where am I going wrong here?</p>
  <p>Also, seeing as I'm new to this, if there's a better way, or more shorthand version of this feel free to let me know :)</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function toggleOnLoad() {
    document.getElementById('dropdown01').style.display = 'none';
  }
  
  function toggleFunction() {
    var dropDown = document.getElementById('dropdown01');
    var dropDownCollapse = document.getElementById('toggle-image').src = "Images/banner_toggle_collapse.png";
    var dropDownExpand = document.getElementById('toggle-image').src = "Images/banner_toggle_expand.png";
  
    if (dropDown.style.display != 'none') {
      dropDown.style.display = 'none';
      document.getElementById('toggle-image').src = dropDownExpand;
    } else {
      dropDown.style.display = '';
      document.getElementById('toggle-image').src = dropDownCollapse;
    }
  
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>css: body {
    background-color: #cccccc;
    padding: 0;
    margin: 0;
  }
  
  .container {
    margin-left: 20%;
    margin-right: 20%;
    background-color: white;
    padding: 1em 3em 1em 3em;
  }
  
  .toggle-header {
    padding: 0.5em;
    background-color: #0067b1;
    overflow: auto;
  }
  
  #toggle {
    border: none;
    width: 300;
    height: 3em;
    background-color: #0067b1;
    outline: 0;
  }
  
  .button-container {
    float: right;
    margin-right: 0.5em;
    display: inline-block;
  }
  
  .dropdowns {
    padding: 2em;
    background-color: #eeeeee;
  }
  
  HTML &amp; Javascript:</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body onLoad="toggleOnLoad(); toggleFunction()"&gt;
    &lt;div class="container"&gt;
      &lt;div class="toggle-header"&gt;
        &lt;div class="button-container" title=""&gt;
          &lt;button id="toggle" onClick="toggleFunction()"&gt;    
                    &lt;img id="toggle-image" src="" alt="toggle" style="max-height: 100%; max-width: 100%"&gt;
                &lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="dropdown01" class="dropdowns"&gt;
        &lt;span&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>