Поочередное разворачивание и сворачивание элементов

.slideToggle()

Вызов этого метода приводит к плавному сворачиванию (если элемент развернут) или разворачиванию (если элемент свернут) выбранных элементов на странице. Отметим, что после скрытия элемента, его css-свойство display становится равным none, а перед появлением, оно получает свое прежнее значение обратно. Метод имеет два варианта использования:

.slideToggle([duration],[callback]):jQuery1.0

duration — продолжительность выполнения анимации (появления или скрытия). Может быть задана в миллисекундах или строковым значением 'fast' или 'slow' (200 и 600 миллисекунд). По умолчанию, анимация будет происходить за 400 миллисекунд.
callback — функция, заданная в качестве обработчика завершения анимации (появления или скрытия). Ей не передается никаких параметров, однако, внутри функции, переменная this будет содержать DOM-объект анимируемого элемента. Если таких элементов несколько, то обработчик будет вызван отдельно, для каждого элемента.

.slideToggle([duration],[easing],[callback]):jQuery1.4.3

duration — см. выше.
easing — изменение скорости анимации (будет ли она замедляется к концу выполнения или наоборот ускорится). (см. описание)
callback — см. выше.

Примеры использования:

$("#leftFit").slideToggle() свернет/развернет элемент с идентификатором leftFit за 400 мс.
$("#leftFit").slideToggle(300) в течении 1/3 секунды свернет/развернет элемент с идентификатором leftFit.
$("#leftFit").slideToggle("slow") в течении 600 мс свернет/развернет элемент с идентификатором leftFit.

Можно скрывать и показывать элементы с помощью изменения размеров и прозрачности, с помощью функций show(), hide().

Если вы хотите только развернуть или только свернуть элементы, воспользуйтесь методами .slideDown(), .slideUp()

В действии

При нажатии на кнопку элемент с картинкой и текстом будет поочередно сворачиваться и разворачиваться:

~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~script src="//code.jquery.com/jquery-1.4.4.js"~gt~~lt~/script~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~button~gt~Вуаля!~lt~/button~gt~~lt~br~gt~~lt~br~gt~
  ~lt~div~gt~
    ~lt~img src="/content/manual/jquery/yo.jpg" style="height:150px; float:right; margin:5px 5px"~gt~
    ~lt~b~gt~Правило.~lt~/b~gt~ Ё должна использоваться: в случаях возможных разночтений; в словарях; 
    в книгах для изучающих русский язык (т. е. детей и иностранцев); для правильного 
    прочтения редких топонимов, названий или фамилий. Во всех остальных случаях 
    наличие буквы ё только затрудняет чтение. Она плохо выглядит, зато хорошо звучит.
  ~lt~/div~gt~
~lt~script~gt~
    $("button").click(function () {
      $("div").slideToggle("slow");
    });
~lt~/script~gt~

~lt~/body~gt~
~lt~/html~gt~

Ссылки

Поисковые ключи:
  • сворачивание элементов
  • свернуть элемент
  • разворачивание элементов
  • развернуть элемент
  • .slideToggle()
  • slideToggle()