Question

Background:

I ran into a problem that I find somewhat unexpected. I have a small jQuery module where I’ve been using .slideToggle() to show/hide an element and it has been working fine. Today I’m implementing two public methods for my plugin, to either show or hide the element with a sliding effect.

Simple as it sounds, I though I’d just use .slideUp() and slideDown() to accomplish the same thing. I was really surprised when I realized that nothing happened upon calling those methods on the element.

As a side note, calling .show() and .hide() works fine as well, but without the desired animation off course.

I always thought that .slideToggle() implemented the same functionality as .slideUp() and .slideDown() “under the hood”, but apparently it doesn’t.

My question:

In what way does .slideToggle() differ from .slideUp() and .slideDown() and what do I have to consider when using one compared to the others?

Update, example:

I’ve been able to break it down into the most crucial components needed to reproduce this error in this fiddle. You can comment out .slideToggle("slow") and .slideUp("slow") respectively to test it. With slideToggle it works, with slideUp it doesnt.

Answer 1

The problem is that slideUp is not the best name for the method. A better name would be “slideHide”. If you change it to slideDown it works as expected, since that corresponds to show.

From http://api.jquery.com/slideUp/

Description: Hide the matched elements with a sliding motion.