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:

something like this: http://stackoverflow.com/questions/10556549/jquery-slidetoggle-from-bottom-to-top? — Johan, Aug 12 '15 at 11:18
Btw the BBC homepage is changing soon, so your reference link will not be relevant soon. Maybe think about taking a screenshot of the effect in action? — evolutionxbox, Aug 12 '15 at 11:23
thanks for that @evolutionxbox i have now added screenshots. — Jay, Aug 12 '15 at 11:32

score 0 · Answer 1 · answered Aug 12 '15 at 11:19

0

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

answered Aug 12 '15 at 11:19

Marcos Pérez Gude

21,869
4
38
69

Is there any way that i can make the comment appear under the heading like it does on the bbc website. So for instance when You click 'Grab a deal' the text slides up with the content 'what a deal' below? – Jay Aug 12 '15 at 11:24

score 0 · Answer 2 · answered Aug 12 '15 at 11:19

0

You can use jquery UI library

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

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

answered Aug 12 '15 at 11:19

Kamlesh Suthar

182
2
8

Slide up div on click

2 Answers2