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

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

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

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

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

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

В действии

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

~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~script src="http://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="/tags/images/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~

Вы можете создать специальные ссылки, с которыми Вы можете позволить пользователю разворачивать и сворачивать все переключатели в текущем разделе одним щелчком. Есть множество очень полезных вещей, которые Вы можете сделать с этой особенностью. Например, это позволяет Вам писать справку и для новичка, и для опытных пользователей, на той же странице. Вы можете потом создать ссылки Более подробно / Менее подробно в заголовке раздела для того, чтобы переключиться между этими двумя версиями. Вы можете также использовать это, чтобы создать кнопку Печать , которая предразвернет все переключатели в текущем разделе перед печатью.

Развернуть все:	Свернуть все:
javascript:HMToggleExpandAll(true)	javascript:HMToggleExpandAll(false)

Чтобы добавить ссылки Развернуть все / Свернуть все , Вы должны вставить необходимый код вручную в шаблон HTML для ваших страниц. Вы будете нуждаться в небольшом количестве опыта в редактировании HTML для этого. См. шаблоны страницы раздела в главе Использование шаблонов HTML для детальных инструкций о том, как добавить код к вашим шаблонам страницы раздела.

Развернуть все:	Свернуть все:
Развернуть все	Свернуть все

Переменная в шаблоне HTML вставляет содержимое вашего раздела из редактора в шаблон. Это означает, что все вставленное непосредственно выше этой переменной вставлено непосредственно перед началом вашего нормального содержимого раздела, все непосредственно ниже нее вставлено непосредственно в конце содержимого вашего раздела.

Заголовок раздела находится в коде между тэгами и . Компоненты заголовка находятся в таблице. Вы, возможно, должны добавить ячейки или строки, чтобы достигнуть эффекта размещения, которого Вы хотите.

Условное выражение Развернуть все / Свернуть все в разделах, содержащих переключатели:

Наряду с переключателями, Help & Manual 4.2 также вводит условие по имени , которое Вы можете использовать в ваших шаблонах HTML . Это условие истинно, если текущий раздел содержит один или более переключателей. Это означает, что Вы можете использовать их, чтобы создать ссылки Развернуть все / Свернуть все, которые будут отображены только в разделах, содержащих переключатели.

Создание кнопки Печать , которая предразворачивает ваши переключатели:

Вы можете использовать функцию Развернуть все , чтобы создать ссылку Печати для Справки HTML и Броузерной справки, которая предразвернет все переключатели в текущем разделе перед его печатью. Для инструкций см. Печать разделов, содержащих переключатели .

См. также:

Сегодня мы научимся сворачивать контент по клику на заголовке (или кнопке). Создадим для этого простой JQuery скрипт.

Главный плюс нашего скрипта будет в том, что он универсален. Вставив его 1 раз в страницу, можно сколько угодно раз добавлять такие блоки, где нужно свернуть контент. И по клику на заголовке - будет сворачиваться нужный!

Для начала создадим html-разметку:

Чайники

Ничего особенного здесь нет. Родительский элемент - .block. Заголовок h1 с классом.extremum-click, по которому мы будем кликать и сам контент с классом.extremum-slide, который будет сворачиваться и разворачиваться.

Теперь зададим стили для лучшего визуального восприятия нашего примера:

.extremum-slide { border : 1px solid ; padding : 50px ; }

А теперь самое интересное - наш скрипт:

$(".extremum-click" ) .click (function () { $(this ) .siblings (".extremum-slide" ) .slideToggle ("slow" ) ; } ) ;

Вот и все - такой простой скрипт! Единственное условие - скрипт нужно вставлять в конце страницы. Не забываем, что это JQuery, а значит предварительно нужно подключить свежую библиотеку! Что указано в скрипте? По клику на элементе с классом.extremum-click нужно скрыть блок.extremum-slide, который находится на 1 уровне с.extremum-click (именно того, по которому совершен клик - это необходимо для возможности добавления нескольких блоков на 1 страницу). Скорость сворачивания/разворачивания - slow (600 мс). Можно поменять на fast (200 мс) или задать значение в миллисекундах. Пользуйтесь!

Весь код целиком:

.extremum-slide { border:1px solid; padding:50px; } Чайники Этот рассказ про то, как я однажды пошел в лес за грибами и нашел волшебный чайник. Чайники Этот рассказ про то, как я однажды пошел в лес за грибами и нашел волшебный чайник. Чайники Этот рассказ про то, как я однажды пошел в лес за грибами и нашел волшебный чайник. $(".extremum-click").click(function () { $(this).siblings(".extremum-slide").slideToggle("slow"); });

The .slideToggle() method animates the height of the matched elements. This causes lower parts of the page to slide up or down, appearing to reveal or conceal the items. If the element is initially displayed, it will be hidden; if hidden, it will be shown. The display property is saved and restored as needed. If an element has a display value of inline , then is hidden and shown, it will once again be displayed inline . When the height reaches 0 after a hiding animation, the display style property is set to none to ensure that the element no longer affects the layout of the page.

Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The strings "fast" and "slow" can be supplied to indicate durations of 200 and 600 milliseconds, respectively.

We can animate any element, such as a simple image:

We will cause .slideToggle() to be called when another element is clicked:

$("#clickme" ).click(function () { $("#book" ).slideToggle("slow" , function () { // Animation complete.

With the element initially shown, we can hide it slowly with the first click:

Figure 1 - Illustration of the slideToggle() effect when hiding the image

A second click will show the element once again:

Figure 2 - Illustration of the slideToggle() effect when showing the image Easing

As of jQuery 1.4.3 , an optional string naming an easing function may be used. Easing functions specify the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called swing , and one that progresses at a constant pace, called linear . More easing functions are available with the use of plug-ins, most notably the jQuery UI suite .

Callback Function

If supplied, the callback is fired once the animation is complete. This can be useful for stringing different animations together in sequence. The callback is not sent any arguments, but this is set to the DOM element being animated. If multiple elements are animated, it is important to note that the callback is executed once per matched element, not once for the animation as a whole.