CODEWITHSUNDEEP
jquerytoggle
matt
matt

Reputation: 44293

jquery toggle - switch between toggle functions?

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?

Upvotes: 2

Views: 14222

Answers (2)

psychotik
psychotik

Reputation: 39009

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

Upvotes: 7

Quintin Robinson
Quintin Robinson

Reputation: 82325

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');
  }
);

Upvotes: 5

Related Questions