Скрипт для сворачивания контента по клику

Сегодня мы научимся сворачивать контент по клику на заголовке (или кнопке). Создадим для этого простой 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"); });

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

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

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

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

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

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

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

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

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

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

См. также:

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.