title: How to toggle a div that is hidden on page load
body: <p>I am using the following js to hide and show my div</p>
  
  <pre><code>function myFunction(test) {
      var x = document.getElementById(test);
  
      if (x.style.display == "none") {
          //x.style.display = "block";
          x.style.setProperty("display", "block", "important")
      } else {
          //x.style.display = "none";
          x.style.setProperty("display", "none", "important")
      }
  }
  </code></pre>
  
  <p>I have all divs hidden on load using a class, which works, but you have to click a link twice to get it to unhide. How can I fix this to unhide on the first click?</p>
  
  <p>The page Im working on is here, you can click on any of the titles to expand some section. (Ignore the formatting, it's very much a work in progress.)</p>
  
  <p><a href="http://thinkularity.eth.link" rel="nofollow noreferrer">http://thinkularity.eth.link</a></p>