title: How to slide a hidden div up/down on click of a button?
body: <p>I want to achieve this type of a slide down except instead of on hover I think I need some sort of script that triggers the slide down on click and then click again to trigger the reverse slide up. I will have a div thats hidden (top: -400px; above the top of the page) and when the button is clicked with slide down and sit at top: 0;</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="container"&gt;&lt;div class="one"&gt;Hover me to reveal new div&lt;/div&gt;
  &lt;div class="two"&gt;I slid!&lt;br&gt;And I am higher than the div before me...&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.container {
  overflow:hidden;
  height: 60px;
  }
  
  .one {
  position: relative;
  top: 0;
  background-color: lightblue;
  z-index: 1;
  }
  
  .two {
  position: relative;
  top: -40px;
  background-color: yellow;
  z-index: -1;
  -webkit-transition: top 1s;
  -moz-transition: top 1s;
  -o-transition: top 1s;
  transition: top 1s;
  }
  
  .one:hover + .two {
  top: 0px;
  }
  </code></pre>
  
  <p>Here is a working fiddle <a href="http://jsfiddle.net/8ZFMJ/2/" rel="noreferrer">http://jsfiddle.net/8ZFMJ/2/</a> - any help would be appreciated. </p>
  
  <p>I have tried using slideToggle however this creates an 'expanding' effect which isn't the type of slide down I want to achieve.</p>
  
  <p>Many thanks. </p>