Javascript toggle w/ multiple divs, first div initially visible
Question
I've got a page with multiple divs and a javascript toggle in place that swaps the visible div when you click the links, but I'd like to have the first div already visible when the page loads (myDiv1 in the code below).
Javascript here:
<script type="text/javascript">
document.load = function(){
document.getElementById('myDiv1').style.display = 'block';
};
var currentActiveDiv;
toggleDiv = function(id){
var domElement = document.getElementById(id);
if (currentActiveDiv){
var elementToHide = document.getElementById(currentActiveDiv);
elementToHide.style.display = 'none';
}
domElement.style.display = 'block';
currentActiveDiv = id;
};
</script>
HTML here:
<h3><a href="#" id="first option" onclick="toggleDiv('myDiv1');" class="homeheader">Div1</a>
<br>
<a href="#" id="first option" onclick="toggleDiv('myDiv2');" class="homeheader">Div2</a>
<br>
<a href="#" id="first option" onclick="toggleDiv('myDiv3');" class="homeheader">Div3</a>
<br>
<a href="#" id="first option" onclick="toggleDiv('myDiv4');" class="homeheader">Div4</a></h3>
</td>
<td width="50">
</td>
<td width="500">
<br>
<br>
<div id="myDiv1" style="display:none;">
<p class=textwhheader>
Div 1 description.
</p>
<br>
<a id='register' class="btn red pure-button pure-button-primary" style="font-size:13.33px; font-weight:700; line-height:26px; height:24px;vertical-align:middle;" href='mecplans.html' title="Click here to learn more.">
Learn More </a>
</div>
<div id="myDiv2" style="display:none;">
<p class=textwhheader>
Div 2 description.
</p>
<br>
<a id='register' class="btn red pure-button pure-button-primary" style="font-size:13.33px; font-weight:700; line-height:26px; height:24px;vertical-align:middle;" href='minimumplans.html' title="Click here to learn more.">
Learn More </a>
</div>
<div id="myDiv3" style="display:none;">
<p class=textwhheader>
Div 3 description.
</p>
<br>
<a id='register' class="btn red pure-button pure-button-primary" style="font-size:13.33px; font-weight:700; line-height:26px; height:24px;vertical-align:middle;" href='fixedindemnity.html' title="Click here to learn more.">
Learn More </a>
</div>
<div id="myDiv4" style="display:none;">
<p class=textwhheader>
Div 4 description.
</p>
<br>
<a id='register' class="btn red pure-button pure-button-primary" style="font-size:13.33px; font-weight:700; line-height:26px; height:24px;vertical-align:middle;" href='specialty.html' title="Click here to learn more.">
Learn More </a>
</div>
I saw a question posted here before by someone who wanted the opposite (they had the div visible when the page loaded and DIDN'T want that), but they didn't have multiple divs and I wasn't able to glean much from it.
2 answers
solution1
0 2015-03-24 21:07:54
You can set the initial visibility in CSS as visibility: visible and then modify it accordingly with your javascript.
OR, you can set everything to visible: hidden in CSS3 and then alter it with a window.onload=myfunction; in your script or <body onload=myfunction()> in your HTML. Inside of your function, you make a call to set the appropriate div to visible document.getElementById('myDiv').style.visible='visible';
solution2
0 ACCPTED 2015-03-25 00:50:17
If you just change your document.load to window.onload , your code will almost work as is. You also need to setup the current active div:
currentActiveDiv = 'myDiv1'
in the onload function.
Also you could optionally call toggleDiv('myDiv1') in the onload function as well.
Here is a jsfiddle:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.