What could be the reason for using .slideToggle () when .slideUp () and slideDown () are not

Question

Background:

I ran into a problem that I find somewhat unexpected. I have a small jQuery module where I used .slideToggle() to show / hide an element and it works fine. Today I am implementing two publicly available methods for my plugin to show or hide an element using a sliding effect.

Simpler as it sounds, although I would just use .slideUp() and slideDown() to accomplish the same thing. I was very surprised when I realized that nothing happened when these methods were called in the element.

As a side note, calling .show() and .hide() also fine, but without the desired animation.

I always thought that .slideToggle() implemented the same functionality as .slideUp() and .slideDown() "under the hood", but apparently this is not the case.

My question is:

What is the difference .slideToggle() and .slideUp() and .slideDown() and what should I consider when using one of them compared to the others?

Refresh, for example:

I was able to break it down into the most important components needed to reproduce this error in this fiddle . You can comment on .slideToggle("slow") and .slideUp("slow") respectively to test it. It works with slideToggle, with slideUp it does not.

Answer 1

The problem is that slideUp not the best name for the method. The best name would be "slideHide". If you change it to slideDown , it will work as expected, as it matches the reading.

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

Description: Hide matched elements with a sliding motion.

Answer 2

It actually works the same. I believe that you have changed the order in which slideDown and slideUp . Here is the updated fiddle .

code:

 var flip = true; $(".dockedHeader").on("click", function () { if (flip) { $(".content").slideDown("slow"); flip = !flip; } else { $(".content").slideUp("slow"); flip = !flip; } //$(".content").slideToggle("slow"); }); 

Your content is initially hidden, so you should call sliderDown() instead of slideUp() to show it and vice versa.