title: How to get a specific jquery toggle show / hide div to load visible?
body: <p>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.</p>
  
  <p>Here is my javascript:</p>
  
  <pre><code>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";
      }
  
  }
  </code></pre>
  
  <p>and the HTML to set up the DIVs and their toggle links:</p>
  
  <pre><code>&lt;a id="displayArch12" href="javascript:a2012();"&gt;2012 Newsletter Archive&lt;/a&gt;
  &lt;div id="toggleArch12" style="display:none"&gt;content goes here&lt;/div&gt;
  
  &lt;a id="displayArch11" href="javascript:a2011();"&gt;2011 Newsletter Archive&lt;/a&gt;
  &lt;div id="toggleArch11" style="display:none"&gt;content goes here&lt;/div&gt;
  </code></pre>
  
  <p>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").</p>
  
  <p>I need the first div to load visible and the correct toggle text (Hide Archive) to show as well. Any ideas?</p>