title: CSS Transitions
body: <p>I have created the jQuery Script below, But am having a few problems converting it to preferably only CSS using transitions. If anybody could help me, I'll be greatfull.</p>
  
  <p><strong>Explanation of the example below:</strong><br /> - When you click on the text box a empty div container drops down, but I am having a few problems with scripting it in just mainly CSS3 Transitions.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="div"&gt;
      &lt;input type="text" class="textbox" id="textbox"/&gt;
      &lt;p&gt;example&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre class="lang-css prettyprint-override"><code>.textbox {width:300px;}
  .div { width:300px; background-color:#f8f8f8; }
  p {width:300px; height:300px; background-color: #f8f8f8;}
  </code></pre>
  
  <p><strong>jQuery:</strong></p>
  
  <pre><code>$("#textbox").click(function() {
      $("p").slideToggle();
  });
  </code></pre>
  
  <p><strong>Live demo: <a href="http://jsfiddle.net/58VHE/28/" rel="nofollow">jsFiddle</a></strong></p>