Метод .slideUp() позволяет плавно уменьшить высоту элемента до 0. Как только высота элемента достигает нулевого значения, ему присваивается свойство display:none, исключающее влияние элемента на компоновку страницы. Метод .slideDown() выполняет обратное действие: он удаляет свойство display:none и плавно увеличивает высоту элемента от 0 до ее исходного значения.

 
Аналогично методам .fadeln() и .fadeOut(), данные методы принимают два необязательных параметра: длительность анимации и функцию обратного вызова. В качестве демонстрационного примера сверните абзац с классом foo по высоте, выведите сообщение в окне консоли, а затем разверните абзац до его первоначального размера и вновь выведите соответствующее сообщение.

 $("p.foo")
    .slideUp(1000, function(){
            console.log("Скрыт!");
        })
    .slideDown(1000, function(){
            console.log("Отображен!");
        });

 Метод .slideToggle() делает то же самое, что и методы .slideUp() и .slideDown(),  достаточно "интеллектуален" и способен самостоятельно определить, какое действие необходимо выполнить, в зависимости от того, скрыт элемент или отображен.

 
Для проверки того, как работает этот метод, примените его к абзацу с классом foo.

 $("p.foo")
    .slideToggle("slow", function(){
            console.log("Переключается!");
        });

Выполнив этот код последовательно несколько раз, вы увидите, как абзац попеременно то свертывается по высоте, то развертывается.