Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Slide down and slide up div on click

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

like image 390
422 Avatar asked Mar 12 '11 00:03

422


People also ask

How do you toggle slideUp and slideDown in jQuery?

The slideToggle() method toggles between slideUp() and slideDown() for the selected elements. This method checks the selected elements for visibility. slideDown() is run if an element is hidden. slideUp() is run if an element is visible - This creates a toggle effect.

How do you slide down in HTML?

The slideDown() method slides-down (shows) the selected elements. Note: slideDown() works on elements hidden with jQuery methods and display:none in CSS (but not visibility:hidden). Tip: To slide-up (hide) elements, look at the slideUp() method.


2 Answers

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

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

Here's a demo.

like image 190
mVChr Avatar answered Oct 13 '22 20:10

mVChr


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

});
like image 34
FatherStorm Avatar answered Oct 13 '22 21:10

FatherStorm