title: How to start off my jquery toggles as hidden?
body: <p>I have some code which displays three images and a respective div under each image.  Using the jquery .toggle function I have made it so each div will toggle when the image above it is clicked.  Is there any way to make it so the divs start off as hidden?</p>
  
  <p>Thank you for your time,</p>
  
  <p>CODE FOR REFERENCE:</p>
  
  <pre><code>    &lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(document).ready(function(){
  $("#picOne").click(function(){
  $("#one").toggle(250);
  
  
   });
  
  $("#picTwo").click(function(){
      $("#two").toggle(250);
    });
  
  
    $("#picThree").click(function(){
      $("#three").toggle(250);
    });
  
  });
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  
      &lt;center&gt;
      &lt;h2&gt;Smooth Transitions&lt;/h2&gt;
  
  
      &lt;img src="one.png" id="picOne"&gt;
          &lt;div id="one"&gt;
          &lt;p&gt;first paragraph.&lt;/p&gt;
          &lt;/div&gt;
  
      &lt;img src="two.png" id="picTwo"&gt;
  
          &lt;div id="two" visibility="hidden"&gt;
          &lt;p&gt;Second Pair of giraffe.&lt;/p&gt;
          &lt;/div&gt;
  
  
      &lt;img src="three.png" id="picThree"&gt;
  
          &lt;div id="three"&gt;
          &lt;p&gt;Thiird paragraph.&lt;/p&gt;
          &lt;/div&gt;
  
  
  
  &lt;/center&gt;
  &lt;/body&gt;
  &lt;/html&gt; 
  </code></pre>