jquery toggle - switch between toggle functions?

Question

hey guys, i love the jquery toggle function. however currently i'm facing a little issue where i don't know how to solve it in the best way.

i'm having a div called #searchbox which is depending on a user-setting either hidden or visible.

a toggle function that is triggered if i click on a button, should .slideDown() the #searchbox or .slideUp() the searchbox.

 //if already visible - slideDown
//if not visible - slideUp
$('#searchboxtrigger').toggle(
  function(){
    $('#searchbox').slideDown('fast');
  },
  function(){
    $('#searchbox').slideUp('fast');
  }
);

actually it works great already, only thing is that the first function inside toggle() always gets fired first, so if the #searchbox is already visible and slidedDown it should immediately trigger the slideUp function and vice versa.

any idea what i have to do to make that work?

Answer 1

$('#searchboxtrigger').click( function(){
    $('#searchbox').slideToggle('fast');
  });

Answer 2

Change your code to include stop()

Description: Stop the currently-running animation on the matched elements.

//if already visible - slideDown
//if not visible - slideUp
$('#searchboxtrigger').toggle(
  function(){
    $('#searchbox').stop(true).slideDown('fast');
  },
  function(){
    $('#searchbox').stop(true).slideUp('fast');
  }
);