Slide up div on click

Question

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: http://www.bbc.co.uk/

i have looked all over the place and found this snippet

$('.grabPromo').click(function(e){
$('.slideUp').slideToggle();
});

JSFIDDLE

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.

I am using it for the captions on the Slick Carousel in case that helps at all.

What i want before Click:

What i want it to do on Click:

Answer 1

You can use the callback:

$('.grabPromo').click(function(e){ 
    $('.slideUp').slideDown(300 , function() {
         $(this).slideUp(300);
    });
});

See the fiddle: http://jsfiddle.net/Sd8rh/858/

In this fiddle you have an example with delay.

Good luck

Answer 2

You can use jquery UI library

$('.grabPromo').click(function(e){
  $('.slideUp').toggle("slide", { direction: 'up' });
});

For more information https://jqueryui.com/effect/