CODEWITHSUNDEEP
javascripthtml
user3569292
user3569292

Reputation: 73

Onload display div, change toggle element?

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

Answers (1)

cppprog
cppprog

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;">&#9660;</span></a></h2>

i.e. make it be the "down arrow" &#9660 by default, instead of the "side arrow" &#9658. 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">&#9658;</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 = '&#9660';
}

Upvotes: 1

Related Questions