slideToggle() can detect SlideUp or SlideDown?

Question

I know hover() has default setting for handIn and handOut, but is there anyway I could detect slideUp and SlideDown inside SlideToggle?

Have code like this:

$("#divName").slideToggle(function(){//when slideUp, do something},
                          function(){//when slideDown, do something});

I tried this code but no luck, do you guys think this may sometimes make things a bit easier ?

`slideToggle` just take duration and a callback for complete. API is not designed to work as you expected. But you can achieve this effect using `toggle`, just try it out — Ravi Hamsa, Oct 29 '13 at 11:43
@RaviHamsa toggle() works similar to slideToggle() but animation tho — Venzentx, Oct 29 '13 at 11:51
version of toggle I used has been removed from JQuery, here is more info http://stackoverflow.com/questions/14338078/equivalent-of-deprecated-jquery-toggle-event — Ravi Hamsa, Oct 29 '13 at 12:39

score 10 · Accepted Answer · edited Oct 30 '16 at 22:38

10

slideToggle doesn't allow for that as default, but it would be easy enough to write your own version. Something like this would work as you alternative handler:

$('#divTrigger').click(function () { // Or bind to any other event you like, or call manually

    var $t = $('#divToSlide');

    if ($t.is(':visible')) {
        $t.slideUp();
        // Other stuff to do on slideUp
    } else {
        $t.slideDown();
        // Other stuff to down on slideDown
    }
});

Equally, if you wanted actions to happen after slideUp or slideDown, you could put them into the callback, like this $.slideUp(300, function() {// Callback here});.

edited Oct 30 '16 at 22:38

Chris Happy

7,088
2
22
49

answered Oct 29 '13 at 11:49

Owen C. Jones

1,435
1
11
13

you can replace the var $t = $(this) with some other selector for the div you actually want to manipulate, eg. var $t = $('#divToSlide'); I'll update the answer. – Owen C. Jones Oct 29 '13 at 11:59
here is another question, when I need to click a button and use slideToggle(), it will not connect to the target div directly, $("#button").click(function(){$("divName").slideToggle();}), in this case how may I achieve the same effect please ? seems is:visible didn't help, making JSFiddle, sec... – Venzentx Oct 29 '13 at 12:10
it works now, thanks for the replacement. but still fancy they could build the function into the source code :P – Venzentx Oct 29 '13 at 13:00
You could make an extension, or fork the repo and add the code? You never know, Resig and his team might pick it up and run with it ;) – Owen C. Jones Oct 29 '13 at 13:04

score 4 · Answer 2 · edited Oct 29 '13 at 11:51

4

What if you check the state of the slide and make than the function?

$("#divName").slideToggle(function(){
    var check=$(this).is(":hidden");

    if(check == true)
    {
     //do something
    }
});

edited Oct 29 '13 at 11:51

damian

5,314
5
34
63

answered Oct 29 '13 at 11:46

Zwen2012

3,360
9
40
67

Janaka Dombawela · Answer 3 · 2015-04-30T12:01:34.987

You can always keep a flag since there is no method in pure jQuery. Assuming #divName is not visible,

var toggle_flag = 0;

$('#divName').click(function () {

   $('#myelement').slideToggle();

   if(toggle_flag==0){
      //code for slide down
      toggle_flag=1;
   }else{
      //code for slide up
      toggle_flag=0;
   }

});

If #divName is already visible you can initiate with var toggle_flag=1; and use this code.

slideToggle() can detect SlideUp or SlideDown?

3 Answers3

Linked