Search code examples
javascripthtmlcsstoggleonload

Javascript - Loading Multiple functions onLoad

I started learning javascript this week and I'm getting my head round the basics. I've started building what will be a "FAQ" section for a page that uses a toggle switch to open and close target divs.

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 "onLoad" in the body tag.

Now, before I applied these functions to run "onLoad" 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.

Where am I going wrong here?

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 :)

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;
  }

}
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 & Javascript:
<body onLoad="toggleOnLoad(); toggleFunction()">
  <div class="container">
    <div class="toggle-header">
      <div class="button-container" title="">
        <button id="toggle" onClick="toggleFunction()">    
                  <img id="toggle-image" src="" alt="toggle" style="max-height: 100%; max-width: 100%">
              </button>
      </div>
    </div>
    <div id="dropdown01" class="dropdowns">
      <span>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</span>
    </div>
  </div>
</body>

Solution

  • Do create an init function manually.

    window.addEventListener("load", myInit, true); function myInit(){  // call your functions here.... };

    By doing this you can call that set of functions anytime.