ceuskervin ceuskervin - 7 months ago 10
Javascript Question

Change Default Visibility in HTML page from Visible to Hidden using Javascript

I copied this code from the following website (it's the last example before comments)

I have a webpage with links that will show/hide hidden text on the page. Everything works great functionality wise, but the hidden text starts off as visible upon the page loading. What do I need to change in the script so that it starts off as hidden. I apologize for the naming conventions, not the best...

javascript:

function showonlyonev2(thechosenone) {
var newboxes = document.getElementsByTagName("div");
for(var x=0; x<newboxes.length; x++) {
name = newboxes[x].getAttribute("class");
if (name == 'newboxes-2') {
if (newboxes[x].id == thechosenone) {
if (newboxes[x].style.display == 'block') {
newboxes[x].style.display = 'none';
}
else {
newboxes[x].style.display = 'block';
}
}else {
newboxes[x].style.display = 'none';
}
}
}
}


the links to the hidden text:

<li>
<a id="myHeader1-2" href="javascript:showonlyonev2('newboxes1-2');"> John Doe</a>
</li>

<li>
<a id="myHeader2-2" href="javascript:showonlyonev2('newboxes2-2');">Jane Doe</a>
</li>


the hidden text:

<div class="newboxes-2" id="newboxes1-2">
<p>Phone Number1</p>
</div>

<div class="newboxes-2" id="newboxes2-2">
<p>Phone Number2</p>
</div>

Answer

In your divs in the html assign style display: none like this.

<div class="newboxes-n" style="display: none;">
Comments