Question

I have 2 divs, one visible, one not. I want to toggle the visibility by clicking a link but when I toggle the second time, my first div doesnt appears.

HTML:

<div class="search-extra">
  <a href="#" id="toggle-to-advanced">Toggle to red</a>
</div>

<div class="search-advanced">
  <a href="#" id="toggle-to-normal">Toggle to black</a>
</div>​

css:

.search-advanced{display:none;}

jQuery:

jQuery('#toggle-to-normal').click(function(e){
    e.preventDefault();
    jQuery('.search-advanced').slideUp('normal').queue( function(){
        jQuery('.search-extra').slideDown('normal');
    });
});

jQuery('#toggle-to-advanced').click(function(e){
    e.preventDefault();
    jQuery('.search-extra').slideUp('normal').queue( function(){
        jQuery('.search-advanced').slideDown('normal');
    });
});​

Demo:

http://jsfiddle.net/rekQ9/

Answer 1

Instead of queue, you can use the callback function on the slides to make it work:

http://jsfiddle.net/rekQ9/2/