title: How can I hide a div until a button is clicked?
body: <p>I'm trying to create 3 divs that are hidden when the page load, so that when I click their respective buttons they show up, however, no matter what I do, I cannot get them to show up with the button click.</p>
  
  <p>Here is the relevant part of the code:</p>
  
  <p>My div and button:</p>
  
  <pre><code>&lt;button onclick="TestsFunction()"&gt;Tests&lt;/button&gt;
  
  &lt;div id="TestsDiv" style="display:none"&gt;
      tests here!
  &lt;/div&gt;
  </code></pre>
  
  <p>And the JS used to show it:</p>
  
  <pre><code>function TestsFunction() {
      var T = document.getElementById("TestsDiv");
      T.style.display = "none";}
  </code></pre>
  
  <p>I can successfully hide the div when I load the page, however after I click the button it doesn't show up again.</p>
  
  <p>I tried</p>
  
  <pre><code>window.onload = function(){
      document.getElementById('TestsDiv').style.display = 'none';
  }
  </code></pre>
  
  <p>Instead of style="display:none" on the div to see if the way I hid it was the problem, but the div still wouldn't show up.</p>
  
  <p>I'm a beginner and I'm not good with JS, HTML or PHP, if possible can someone both help and explain my mistake? Do I need something else in my code? I tried reading similar threads but the solutions were all too complicated for my understanding and I ended up not being able to fix my problem. Thank you!</p>