# Метод slideToggle

Метод `slideToggle` плавно показывает скрытые элементы и скрывает показанные.

## Синтаксис

Показ/скрытие за заданное время, `400мс` по умолчанию:

`.slideToggle(длительность);`

Время можно задавать не только в миллисекундах, но и ключевыми словами `slow` (`600мс`) и `fast` (`200мс`), чем больше значение, тем медленней анимация:

`.slideToggle('slow' или 'fast');`

Если не указывать параметры - анимации не будет, элементы будут показываться/скрываться мгновенно:

`.slideToggle();`

Можно также вторым параметром передать функцию плавности, а также третьим callback-функцию - сработает после выполнения анимации. Оба параметра необязательны:

`.slideToggle(длительность, [функция плавности], [callback-функция]);`

Можно передать методу различные опции, в виде объекта JavaScript, содержащего пары ключ: значение:

`.slideToggle(options);`

Такой объект может передавать следующие параметры и функции - `duration`, `easing`, `queue`, `specialEasing`, `step`, `progress`, `complete`, `start`, `done`, `fail`, `always`. Описание этих параметров вы можете посмотреть для метода ⁅с href="/ru/javascript/lib/jquery/manual/animate/"⁆animate⁅/с⁆. Например, установим длительность и функцию плавности:

`.slideToggle( {duration: 600, easing: easeInSine} );`

## Пример

Давайте после нажатия кнопки, плавно скроем родительский `div`, который содержит абзацы, с помощью метода `slideToggle` (этот `div` мы найдем с помощью метода `parent`), после повторного нажатия кнопки, `div` будет снова плавно показан и т.д. Передав ключевое слово `slow`, мы установим скорость на `600мс`:

`<button>toggle text</button> <div> <p id='test'>text text text text text text text</p> <p>text text text text text text text</p> <p>text text text text text text text</p> </div>` `$('button').click(function() { $('#test').parent().slideToggle('slow'); });`

## Смотрите также

- метод `slideUp`,
  который плавно скрывает элементы
- метод `slideDown`,
  который плавно показывает элементы
- метод `height`,
  который позволяет получать и изменять высоту элемента
- метод `toggle`,
  который чередует плавный показ/скрытие элементов

← →
↑