title: appear and disappear effect for div by clicking on it
body: <p>I can't understand how to make something like in this site: __smashingmagazine.com</p>
  
  <p>If u resize the window, the search will be with a button. So... try to click on this search icon... the new div will appear with search input. and pay attention to the behavior of it: no matter what u gonna do next this div won't hide it self, but only if you click on 'x' that appear instead of search icon...  and this is pure css, right?! how this possible... 
  I found this article: 
  <a href="https://stackoverflow.com/questions/14331924/is-it-possible-to-show-a-div-on-click-using-the-active-selector-in-css">Click here</a></p>
  
  <p>but the behavior is very, very different... and i don't like it at all. </p>
  
  <p>Any idea how to make it work like in the site above? anything would may help! </p>
  
  <p>Thanks! </p>