title: Slide up div on click
body: <p>I want to create an effect similar to the bbc website where the user will click on the title and then a snippet of content will pop up: <a href="http://www.bbc.co.uk/" rel="nofollow noreferrer">http://www.bbc.co.uk/</a></p>
  
  <p>i have looked all over the place and found this snippet</p>
  
  <pre><code>$('.grabPromo').click(function(e){
  $('.slideUp').slideToggle();
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/Sd8rh/" rel="nofollow noreferrer">JSFIDDLE</a></p>
  
  <p>I cannot get it to the opposite though? i want the text to slideup rather then down. Any help would be appreciated. if someone can point me in the right direction either using css or Jquery i would be grateful.</p>
  
  <p>I am using it for the captions on the <a href="http://kenwheeler.github.io/slick/" rel="nofollow noreferrer">Slick Carousel</a> in case that helps at all.</p>
  
  <p>What i want before Click:
  <a href="https://i.stack.imgur.com/BQZih.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BQZih.jpg" alt="BBC Before Hover"></a></p>
  
  <p>What i want it to do on Click:
  <a href="https://i.stack.imgur.com/ZOLAC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZOLAC.png" alt="BBC on hover"></a></p>