javascript - Slide down and slide up div on click

Question

I am using the following code to open and close a div ( slide up/down ) using js

I have the slide down event attached to a button and the slide up event sttached to close text.

What I want is the button onclick to open and onclick again close the slide element.

Here is the JS

// slide down effect

$(function(){
$('.grabPromo').click(function(){
var parent = $(this).parents('.promo');
$(parent).find('.slideDown').slideDown();
});
$('.closeSlide').click(function(){
var parent = $(this).parents('.promo');
$(parent).find('.slideDown').slideUp();
});
});

The HTML:

<span class="grabPromo">Open</span>

and in the slide down area i have

<a class="closeSlide">Close</a>

Any help appreciated.

Ideally I want a down pointing arrow on the slide down button and a up pointing arrow to replace it to slide up on same button. And do away with the close link altogether.

Any help appreciated. Cheers

Answer 1

You can just use slideToggle() in the click function:

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

Here's a demo.