title: CSS Click Events
body: <p>So I found a fiddle example using <code>:hover</code> as a selector to hide a div tag until something is moused over a selected area.  I have been doing some research but to no avail, how would I change <code>:hover</code> to something that would be more of a "onclick"</p>
  
  <p><a href="http://jsfiddle.net/rakesh_vadnal/RKxZj/1/" rel="nofollow">http://jsfiddle.net/rakesh_vadnal/RKxZj/1/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="button"&gt;&lt;h3&gt;button&lt;/h3&gt;
      &lt;div id="two"&gt;Hovered content&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#button {
      background:#FFF;
      position:relative;
      width:100px;
      height:30px;
      line-height:27px;
      display:block;
      border:1px solid #dadada;
      margin:15px 0 0 10px;
      text-align:center;
  }
  #two {
      background: none repeat scroll 0 0 #EEEEEE;
      border: 1px solid #DADADA;
      color: #333333;
      width:98px;
      height: 0;
      overflow:hidden;
      left: 0;
      line-height: 20px;
      position: absolute;
      top: 30px;
      -webkit-transition: all .3s ease; 
      -moz-transition: all .3s ease; 
      -ms-transition: all .3s ease; 
      -o-transition: all .3s ease; 
      transition: all .3s ease;
  }
  #button:hover &gt; #two {
      display:block;
      left:0px;
      height:100px;
  }
  </code></pre>