Скрипт для сворачивания контента по клику
Сегодня мы научимся сворачивать контент по клику на заголовке (или кнопке). Создадим для этого простой JQuery скрипт.
Главный плюс нашего скрипта будет в том, что он универсален. Вставив его 1 раз в страницу, можно сколько угодно раз добавлять такие блоки, где нужно свернуть контент. И по клику на заголовке - будет сворачиваться нужный!
Для начала создадим html-разметку:
<div class="block"> <h1 class="extremum-click">Чайники</h1> <div class="extremum-slide"> Этот рассказ про то, как я однажды пошел в лес за грибами и нашел волшебный чайник. </div> </div>
Ничего особенного здесь нет. Родительский элемент - .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 мс) или задать значение в миллисекундах. Пользуйтесь!
Весь код целиком:
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script src="jquery-1.7.2.js"></script> <style> .extremum-slide { border:1px solid; padding:50px; } </style> </head> <body> <div class="block"> <h1 class="extremum-click">Чайники</h1> <div class="extremum-slide"> Этот рассказ про то, как я однажды пошел в лес за грибами и нашел волшебный чайник. </div> </div> <div class="block"> <h1 class="extremum-click">Чайники</h1> <div class="extremum-slide"> Этот рассказ про то, как я однажды пошел в лес за грибами и нашел волшебный чайник. </div> </div> <div class="block"> <h1 class="extremum-click">Чайники</h1> <div class="extremum-slide"> Этот рассказ про то, как я однажды пошел в лес за грибами и нашел волшебный чайник. </div> </div> <script> $(".extremum-click").click(function () { $(this).siblings(".extremum-slide").slideToggle("slow"); }); </script> </body> </html>