Question

86

Slide down and slide up div on click

rated 0 times [ 87] [ 1] / answers: 1 / hits: 75542 / 13 Years ago, sat, march 12, 2011, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

santiago

Add To Favorites

Follow

Total Points: 375

Total Questions: 106

Total Answers: 97

Location: Argentina

Member since Thu, Mar 18, 2021

3 Years ago

answered 14 Years ago jazminuniquer · Accepted Answer

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



});