How to get a specific jquery toggle show / hide div to load visible?

0
votes

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?

4
javascripttoggleshow-hide
There's zero jQuery here. – Matt Ball
You are showing the code for when the links are clicked, but what code do you have when the page loads that you are expecting to make one of the divs visible and change the link's text? – MrOBrian
You can see it in action here: s13.mynewsitereview.com/newsletters Currently all divs load hidden. I need the first div (and only the first div) to load visible. – Cynthia
if you view src on the page, you'll see it calling the current v. of jQuery and then it also uses the collapse.js file (also accessible via view src) – Cynthia

4 Answers

1
votes

If you want to use jQuery (which you are not from the code you've posted), you could write it like this:

$("#displayArch11").click(function(e) {
    var $display = $(this)
    $display.next().toggle(function() {
         $display.html($display.html() == "2011 Newsletter Archive" ? "Hide Archive" : "2011 Newsletter Archive");
    });
    e.preventDefault();        
});
$("#displayArch12").click(function(e) {
    var $display = $(this)
    $display.next().toggle(function() {
         $display.html($display.html() == "2012 Newsletter Archive" ? "Hide Archive" : "2012 Newsletter Archive");
    });
    e.preventDefault();        
});

and the HTML like this

<a id="displayArch12" href="#">2012 Newsletter Archive</a>
<div id="toggleArch12" style="display:none">content goes here</div>

<a id="displayArch11" href="#">2011 Newsletter Archive</a>
<div id="toggleArch11" style="display:none">content goes here</div>
0
votes

Change the inline script:

<div id="toggleArch12" style="display:block">content goes here</div>
0
votes

First, if you want one of the divs to be visible, just don't specify the display property. They are visible by default. Though the value you are looking for with a div is display:block;

I would use a div instead of a link for your toggling needs.

<div id="displayArch12" class="toggleDiv">
    2012 Newsletter Archive
    <div id="toggleArch12" style="display:block;">Content Here</div>
</div>
<div id="displayArch11" class="toggleDiv">
    2011 Newsletter Archive
    <div id="toggleArch11" style="display:none;">Content Here</div>
</div>

Then you need some real jQuery to toggle them properly.

$(function() {
    $(".toggleDiv").click(function () {
        $("div:first-child", this).toggle();
    });
});

That should work for you. And of course don't forget to include the jQuery library itself. The easiest way is to use the Google API link.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
0
votes

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>