Menu
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>
259
Unfortunately, you cannot place multiple onload events on a single page. You can nest multiple functions within the one onload call, but what if you need to cascade an onload script across multiple pages, some which may already have an existing onload event? use the addLoadEvent function below.
document. onload event is fired before the window. onload.
onload is most often used within the <body> element to execute a script once a web page has completely loaded all content (including images, script files, CSS files, etc.). However, it can be used on other elements as well (see "Supported HTML tags" below).
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.
73
The better way to do it i believe is to call your functions inside window.load instead of the body as follows:
window.onload=function(){
toggleOnLoad();
toggleFunction();
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
