Question

I am using jQuery to hide / show sections of content on a page. On one page, I have two such sections. Right now the page loads with both hidden. I need the page to load with the first div visible and the second one hidden.

Here is my javascript:

function a2012() {
    var ele = document.getElementById("toggleArch12");
    var text = document.getElementById("displayArch12");
    if(ele.style.display == "block") {
            ele.style.display = "none";
        text.innerHTML = "2012 Newsletter Archive";
    }
    else {
        ele.style.display = "block";
        text.innerHTML = "Hide Archive";
    }

} 

function a2011() {
    var ele = document.getElementById("toggleArch11");
    var text = document.getElementById("displayArch11");
    if(ele.style.display == "block") {
            ele.style.display = "none";
        text.innerHTML = "2011 Newsletter Archive";
    }
    else {
        ele.style.display = "block";
        text.innerHTML = "Hide Archive";
    }

}

and the HTML to set up the DIVs and their toggle links:

<a id="displayArch12" href="javascript:a2012();">2012 Newsletter Archive</a>
<div id="toggleArch12" style="display:none">content goes here</div>

<a id="displayArch11" href="javascript:a2011();">2011 Newsletter Archive</a>
<div id="toggleArch11" style="display:none">content goes here</div>

I tried changing style=”display:none” for the first div to style=”display:visible” and while it does cause the page to load with the contents visible, the toggle link still shows the “click to open” text (in this case “2012 Newsletter Archive”).

I need the first div to load visible and the correct toggle text (Hide Archive) to show as well. Any ideas?

Answer 1

This is easier if you use jQuery, but I think simply setting the correct default html should achieve your goal.

<a id="displayArch12" href="javascript:a2012();">Hide Archive</a>
<div id="toggleArch12" style="display:block">content goes here</div>