Reputation: 73
I have created a sample JSFiddle to demonstrate my issue.
I am using the following function to open div #bogtoggle1
only on onload:
window.onload = function () {
document.getElementById("node1").style.display = "block";
However, as a relative JS newbie, I can't quite figure out how to also get my toggle arrow (►►
) on #bogtoggle1
div to change to (▼▼
) on onload, as it does onclick.
Can someone help? Thanks
(FYI, THE JSFIDDLE HTML IS STATIC FOR DEMO ONLY, BUT POPULATES DYNAMICALLY FROM A DATABASE ON THE REAL SITE. The right-facing toggle arrow (►►
) is what the inline style for the div defaults to. So I need a solution from within the function, not the HTML.)
Upvotes: 1
Views: 724
Reputation: 794
Change your html header to this:
<h2 id="Border" style="display:inline;cursor:pointer;"><a onclick="toggle(this, 'node1')"> Border <span style="font-size:1.1em;color:#5C6467;">▼</span></a></h2>
i.e. make it be the "down arrow" ▼
by default, instead of the "side arrow" ►
. This way, from then on, your toggle
function will take care of the rest.
Here's an updated jsFiddle based on your original.
EDIT
Based on the updated questions, here's a solution: give the <span>
an id
, then change the innerHTML
of that <span>
in the onload() function. See the updated jsFiddle.
HTML was changed to this (innerHTML as normal, but add id
tag to the span
):
<h2 id="Border" style="display:inline;cursor:pointer;"><a onclick="toggle(this, 'node1')"> Border <span style="font-size:1.1em;color:#5C6467;" id="theSpan">►</span></a></h2
JS was changed to this (add the second line to change to "down arrow" on load):
window.onload = function () {
document.getElementById("node1").style.display = "block";
document.getElementById("theSpan").innerHTML = '▼';
}
Upvotes: 1