15

In jQuery, I know that we can pass true or false value to the function to toggle visibility of an element. I can't get slideToggle to do the same thing. Any help please?

For example, instead of:

if (true)
    $('something').slideDown();
else
    $('something').slideUp();

I would really like to do something similar to:

$('something').toggle(myBoolValue);

But I want to do it with slideToggle.

Look at my example of jsfiddle to know what I am trying to do.

Is that possible?

2
  • What's wrong with your if statment? (other than no curly braces) Nov 29, 2011 at 15:23
  • 4
    @jondavidjohn, having no curly braces is not wrong! and with my statement, I am just curious if I have any smarter way of doing things Nov 29, 2011 at 15:27

4 Answers 4

19

slideToggle optionally takes 2 parameters duration and a callback so passing true/false to show/hide will not work. You might have to write your own plugin which will implement this logic. Something like this

$.fn.mySllideToggle = function(show){
   if(show){
      $(this).slideDown();
   }
   else{
      $(this).slideUp();
   }
}
4
  • 3
    I did think of this, but I wasn't willing to believe that there wasn't something simpler.. oh well Nov 29, 2011 at 15:21
  • I will accept this answer when the time limit gets over.. since it is most logical, explaining the two optional parameters.. thanks Nov 29, 2011 at 15:26
  • Thanks @LocustHorde glad it helped you. Nov 29, 2011 at 15:28
  • 1
    This answer does not follow normal jQuery method conventions. this is already a jQuery type, no need to create new ones, and it doesn't chain.
    – Walf
    Mar 12, 2020 at 23:09
5

It is simple like this:

$.fn.slideToggleBool = function(bool, options) {
  return bool? $(this).slideDown(options) : $(this).slideUp(options);
}

Enjoy!

1
  • 2
    The extra $(…) is unnecessary.
    – Walf
    Mar 12, 2020 at 23:10
1

It can be shimmed in like so:

;(function($) {
    var slideToggleOrig = $.fn.slideToggle;
    $.fn.slideToggle = function(display) {
        var fn,
            args = arguments;
        if ('boolean' != typeof display) {
            fn = slideToggleOrig;
        }
        else {
            if (display) {
                fn = this.slideDown;
            }
            else {
                fn = this.slideUp;
            }
            args = Array.prototype.slice.call(args, 1);// hide the extra arg from official functions
        }
        return fn.apply(this, args);
    };
})(jQuery);

This works by detecting if the first argument to slideToggle is a boolean (not just truthy/falsy) and, if so, substituting the up and down functions which have compatible signatures. This means you can use any existing signature, but add an extra argument at the start. It also chains correctly without modifying the stack or creating a new object.

-6

http://api.jquery.com/slideToggle/

$('something').slideToggle('slow');

http://jsfiddle.net/WLp9z/1/

1
  • Hi, the initial values vary, so I can actually start with div invisible OR checkbox unchecked.. so in either case, checking them would be doign quite the opposite! Nov 29, 2011 at 15:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.