title: How to make HTML text hidden until clicked on
body: <p>I'm trying to learn how to make HTML text toggle with jQuery, which is pretty easy in itself, but I want the text to be hidden automatically until it is clicked on with a button. I've looked it up and I can't find how to do this. I figured it should be easy, and I have this part</p>
  
  <pre><code>&lt;h4 id="text1"&gt;This is some toggleable text&lt;/h4&gt;
  
  $(document).ready(function(){
      $("#button1").click(function(){
        $("#text1").toggle();
      });
  });
  </code></pre>
  
  <p>Which works fine as a regular toggle, but this leaves the text there until first clicked on. </p>
  
  <p>Codepen: <a href="https://codepen.io/anon/pen/bYYeEB" rel="nofollow noreferrer">https://codepen.io/anon/pen/bYYeEB</a></p>