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.

Answer 2

try this. it allows multiple items so isn't ID specific. and supports any content loaded via AJAX as well. jsfiddle is here

<div class='toggle_parent'>
  <div class='toggleHolder'>
    <span class='toggler'>Open</span>
    <span class-'toggler' style='display:none;'>Close</span>
  </div>
  <div class='toggled_content' style='display:none;'>
      My Content
  </div>
</div>

and

$('.toggler').live('click',function(){
  $(this).parent().children().toggle();  //swaps the display:none between the two spans
  $(this).parent().parent().find('.toggled_content').slideToggle();  //swap the display of the main content with slide action

});

Answer 3

<div id="content">
bla bla bla bla bla bla bla bla blabla bla blabla bla bla
</div>
<input type="button" id="myButton" value="Slide down ↓"/>

$("#myButton").toggle(function(){
    $("#content").slideDown();
    $(this).val("Slide up ↑");
},function(){
    $("#content").slideUp();
    $(this).val("Slide down ↓")
});

Online demo : http://jsfiddle.net/amosrivera/AYWku/

Demo with span : http://jsfiddle.net/amosrivera/AYWku/1/

Answer 4

HTML:

<div class='parent_row'>
   <span class='toggler_row'>click here</span>
   <div class='child_row' style='display:none;'>
      Row 1
   </div>
   <div class='child_row' style='display:none;'>
      Row 2
   </div>
   <div class='child_row' style='display:none;'>
      Row 3
   </div>
</div>

JS/Jquery :

$('.toggler_row').live('click',function(){
   $(this).parent().parent().find('.child_row').slideToggle();
});

jQuery .live() has been removed in version 1.9 onwards, if it is breaking then try below scripts it will work.

$('body').on('click', '.toggler_row',function(){
   $(this).parent().parent().find('.child_row').slideToggle();
});