jquery toggle slideUp/slideDown

Question

I\'ve got a div#items and if it\'s clicked then div#choices slideDown(). If it\'s clicked again then div#choices should slideUp(); How can I test if choices is down or up al

Answer 1

Try this -

HTML:

<a href="#demo" class="nav-toggle">Show</a>
<div id="demo" style="display:none;">
<p>short info</p>
</div>

JQUERY SCRIPT:

$('.nav-toggle').click(function(){
   var content_id = $(this).attr('href');               
   var toggle_switch = $(this); 
     $(content_id).toggle(function(){
    if($(this).css('display')=='none'){
          toggle_switch.html('Show');
    }else{
      toggle_switch.html('Hide');
        }
    });  
});

Answer 2

Use .slideToggle()

Answer 3

As Marimuthu's answer points out, you can use slideToggle() to slide up if the div is already open, or down if it's closed.

You can also check the display property to find out if it's currently visible or not. From the jQuery docs for slideUp().

Once the height reaches 0, the display style property is set to none to ensure that the element no longer affects the layout of the page.

Knowing this, you can check to see if it is set to "none":

var $choices = $('div#choices');
if ($choices.css("display") == "none")
    $choices.slideDown();
else
    $choices.slideUp();