# Метод toggle

Метод `toggle` чередует плавный показ/скрытие элементов. Если элемент показан, то он будет скрыт и наоборот.

## Синтаксис

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

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

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

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

Можно параметром `display` передавать значение `true` или `false`. Если `true`, то элемент будет только показываться, `false` - скрываться:

`.toggle(display);`

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

`.toggle();`

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

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

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

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

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

`.toggle(options);`

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

`.toggle( {duration: 800, easing: easeInSine} );`

## Пример

Давайте после нажатия кнопки, будем плавно показывать скрытый абзац с помощью метода `toggle`. Передав ключевое слово `slow`, мы установим скорость на `600мс`. По повторному нажатию - скрывать:

`<button>show text</button> <p style="display: none">text</p>` `$('button').click(function() { $('p').toggle('slow'); });`

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

- метод `fadeToggle`,
  который меняет прозрачность элементов
- метод `slideToggle`,
  который чередует плавный показ/скрытие элементов
- метод `show`,
  который плавно показывает элементы
- метод `hide`,
  который плавно скрывает элементы

←→
↑