Показать и скрыть блок по клику jquery. Плавное открытие и скрытие блока div средствами jQuery

Большинство из Вас, прочитав заголовок данной статьи, скажут, что обработка события click на CSS невозможна. Однако, это не совсем так. И в данной статье я покажу, как можно обработать событие click с использованием только CSS .

Допустим, у нас есть некая вкладка, кликнув мышкой по которой, должно открыться содержимое этой вкладки. Абсолютное большинство всё это будет делать на JavaScript , но на самом деле, в данном случае, событие click легко обработается через CSS .

Для начала самый обычный HTML-код :

Содержимое 1
Вкладка 1


Содержимое 2
Вкладка 2

Ничего необычного, разве что название вкладки расположено ниже контента, позже, Вы поймёте почему. А теперь CSS-код :

Tabs {
float: left; /* Все вкладки располагаем в одну строку */
margin: 10px; /* Отступы вкладок друг от друга */
}
.content {
display: none; /* Скрываем содержимое */
padding-top: 20px; /* Чтобы название вкладки было ниже содержимого */
position: absolute; /* Чтобы содержимое не двигало элементы на странице */
}
.tabs:active .content {
display: block; /* Когда кликаем по вкладке, открываем содержимое content */
}
.content:hover {
display: block; /* Пока курсор наведён на контент, не закрываем его */
}

Алгоритм следующий, при клике по названию вкладки, автоматически срабатывает псевдоэлемент active , но поскольку он будет работать только при нажатой клавиши, то стоить нам отпустить, как контент закроется. Чтобы этого не было, мы добавляем условие, что если курсор наведён на контент (псевдоэлемент hover ), то он не будет закрываться. А для того, чтобы кликнув по вкладке, наш курсор автоматически оказался бы и на контенте, мы и расположили кнопку ниже контента, а также сделали ещё и поле сверху. Таким образом, кликнув по названию вкладки, мы кликаем и по контенту тоже, поэтому после клика мы можем смело отпустить кнопку мыши, и у нас продолжит "держать" контент наведение курсора.

Сегодня мы поговорим с вами о том, как можно по клику скрыть элемент. Или по клику показать его. Или по первому клику - скрыть, а по второму клику - показать. В общем, я думаю, вы поняли о чем я говорю. Нечто подобное было описано в этой статье .

Но сегодня все будет не так. Эффект будет тот же, но скрываться будет быстро, мгновенно, а не плавно. Для этого создадим всю ту же разметку:

Теперь пропишем стили. По умолчанию блок с текстом скрыт. Добавим немного визуальных эффектов и, самое главное, - мы слегка усовершенствуем скрипт. По клику на заголовке будем выделять его цветом. Вот стили:

Теперь сам скрипт, который все это дело оживите:

Вот собственно и все - можно наслаждаться результатом. Особо рассказывать нечего: нажимаем на заголовок.extremum-click , показывается текст.extremum-slide и одновременно выделяется все тот же заголовок. При следующем клике по заголовку - блок с текстом исчезает.

Весь код страницы:

Спойлер – это блок с информацией, который изначально скрыт от пользователей и появляется лишь тогда, когда пользователь нажмет на определенную кнопку. На моем сайте в виде спойлера сделаны ПРАВИЛА добавления комментариев. Если нажать на слово ПРАВИЛА, которое выделено, то ниже откроется блок с правилами.

Как писал Выше, покажу несколько способов, которые по своей сути похожи, но используют разные скрипты и осуществляют разную анимацию. Ниже представлены примеры.

Давайте по порядку разберем каждый из способов, чтобы Вы могли применить один из них у себя на сайте. Но перед тем как это сделать, давайте определимся с библиотекой jquery. Если вы ранее подключали ее, то приступайте к просмотру способов, если нет, то в шапке или подвале подключите.

Теперь поехали по порядку.

По сути самый простой из способов, при нажатии блок моментально появляется. При повторном нажатии моментально исчезает. Все просто. Данный способ использую и я.

Добавляем очень простенький скрипт. Его можно добавить непосредственно в то место где хотите вывести блок, можете подключить в шапке или подвале, а можете поместить его в файл, который потом подключить к сайту, опять же, где угодно.

$(document).ready(function(){ $(".spoiler-body").hide(); $(".spoiler-title").click(function(){ $(this).next().toggle()}); });

Скрипт работает с блоком у которого присвоен класс spoiler-body и показывает его когда будет совершено нажатие на кнопку, блок или ссылку, в общем что угодно, у чего присвоен класс spoiler-title . Для показа блока, скрипт использует метод toggle .

Спойлер Показать/скрыть Скрытый текст, который появится при наведении

Кнопкой, которая будет открывать станет текст внутри тега b , как и говорил, можете использовать любой тег.

Ну и присвоим минимальные стили. Главный параметр - это display:none у блока, который будет скрытым. Это обязательное условие, иначе не будет работать.

Spoiler-title{cursor:pointer;} .spoiler-body{display:none;background:#f1f1f1;}

Больше ничего не нужно, все должно работать. Есть еще один момент. Можно сделать эту анимацию немного плавнее. Для этого в скобках после метода toggle добавьте значение в миллисекундах.
Например: toggle(500) . Теперь открытие блока будет происходить не моментально, а пол секунды 0,5. Открывающийся блок появится по диагонали от верхнего левого угла к нижнему правому. Это Вы можете увидеть в примере выше.

Для этого метода и для всех остальных, будут использоваться все те же блоки и классы, поэтому я не буду расписывать все заново. Отличаться будет лишь сам скрипт.

Данный способ плавно открывает блок и он появляется сверху вниз. Для появления, скрипт использует метод slideToggle .

$(document).ready(function(){ $(".spoiler-title").click(function(){ $(this).parent().children(".spoiler-body").slideToggle(); return false; }); });

Тут как и в первом варианте можно изменить время анимации. По умолчанию его значение равно 400 миллисекунд. Если желаете ускорить или замедлить, то в скобках добавьте значение.
Например: slideToggle(600) .

Этот способ по сути как и второй, стой же анимацией, но в нем есть одна интересная фишка. Меняется кнопка на которую нажали для открытия блока. В примере вы видели, это просто текст - Показать текст который при открытии блока, меняется на Скрыть текст .
Если добавить фантазию, то можно вместо текста добавить картинку или блок, который украсить стилями. Используется в этом способе, следующая функция.

$(document).ready(function(){ $(".spoiler-body").hide(); $(".spoiler-title").click(function(){ $(this).toggleClass("opened").toggleClass("closed").next().slideToggle(); if($(this).hasClass("opened")) { $(this).html("Скрыть текст"); } else { $(this).html("Показать текст"); } }); });

Изменить время анимации можно по тому же методу, что и во втором способе.

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

А Вы используете спойлеры у себя на сайте и для чего?

На этом все, спасибо за внимание. 🙂

В процессе создания сайта или блога и дальнейшего его наполнения содержанием, по разным причинам, порой возникает необходимость скрыть какую-то часть текста, разместить более объёмную информацию в спрятанный до поры до времени блок, но при этом всё же указать пользователю на то, что имеется ещё кое что, и предоставить ему возможность просмотреть скрытое содержание без перехода на следующую строку или страницу.
Раньше для реализации такого решения использовалась груда javascript, теперь же всё это можно очень легко исполнить с помощью удивительных свойств .

Сегодня мы рассмотрим простейший способ создания на страницах сайта и в отдельных сообщениях, скрытых блоков с содержанием, раскрывающихся при нажатии на определенный элемент текста, используя исключительно свойства CSS3. Переключателем может служить и отдельное слово, и выделенное словосочетание, а так же целое предложение, или информативная иконка.
Такие блоки часто используются на страницах с большим количеством содержания, для того чтобы сделать его более структурированным и компактным, все содержание при этом делится на так называемые группы, в которых на обозрение пользователю представлены только заголовки, весь текст по умолчанию скрыт и увидеть его можно нажав на определенный элемент(см. выше).

Давайте, постараемся обойтись без лишней воды, посмотрите весь этот простейший механизм в действии, на наглядном примере, так же можете и подредактировать что-нибудь при желании:

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

Как видите всё более-чем прекрасно работает, скрытое содержание, как появляется без проблем, так и исчезает от легкого нажатия мышкой, и при этом мы задействовали самый минимум исполняемого кода, и в html-каркасе, и в формировании стилей css. Без подключения дополнительных javascript библиотек, с извечной тревогой, а не отключены ли они на стороне пользователя.
Реализовать всё это действо, стало возможным благодаря CSS3 псевдоклассу :checked , применяемым к элементам интерфейса, таким как переключатели (). Что мы собственно и сделали, в теге атрибуту type мы присвоили значение checkbox , а так же идентификатор id="hd-1" соответствующий уникальному идентификатору for="hd-1" переключателя текущего блока. Чекбоксы спрячем основательно и навсегда, прописав в классе.hide свойство display: none;
Собственно здесь, объяснять-то особо и нечего, весь механизм включения и выключения скрытых блоков состоит из трех элементов:

• Флажок (Checkbox) — тег со значением checkbox атрибута type и с определённым связующим идентификатором
• Заголовок (текст переключатель) — тег со значением уникального идентификатора для атрибута for , (идентификатор обязательно должен быть таким же, как идентификатор тега input со значением checkbox атрибута type ).
• Блок с содержимым — тег div , в котором и будет содержаться до лучших времен, пока пользователь не кликнет, различный скрытый контент (текст, изображения и т.д. и т.п.)

Надеюсь, из моего сумбурного пояснения, все же стало понятно в чём вся фишка. CSS применяет новые стили (с помощью псевдокласса checked ), чтобы показать блок контента, который до этого был скрыт, только тогда, когда пользователь нажимает на элемент, который связан с флажком(checkbox) по уникальному идентификатору.

Из всего этого следует важное замечание :

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

Так, на словах мы разобрали, что куда и зачем, теперь, давайте посмотрим на html-каркас всей коннструкции:

Нажмите здесь, чтобы открыть! Скрытое содержание...... Нажмите здесь, чтобы прочитать больше! Скрытое содержание...

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

/* скрываем чекбоксы и блоки с содержанием */ .hide, .hide + label ~ div { display: none; } /* вид текста label */ .hide + label, .hide:checked + label { padding: 0; color: green; cursor: pointer; border-bottom: 1px dotted green; } /* вид текста label при активном переключателе */ .hide:checked + label { color: red; border-bottom: 0; } /* когда чекбокс активен показываем блоки с содержанием */ .hide:checked + label + div { display: block; background: #efefef; -moz-box-shadow: inset 3px 3px 10px #7d8e8f; -webkit-box-shadow: inset 3px 3px 10px #7d8e8f; box-shadow: inset 3px 3px 10px #7d8e8f; padding: 10px; }

Это всё, для аскетичного примера, вполне достаточный минимум. Но ведь, мы будем совсем не мы, если не навесим хоть каких-нибудь плюшек, да и пользователю лучше подсказать визуально, куда следует нажимать.
Во втором примере добавил простенький символ в виде плюса, который явно указывает на то, что здесь скрывается ещё что-то, при нажатии он моментально превращается в минус, а скрытым блокам с содержанием, прикрутил чуточку анимации при появлении, и всё это исключительно с помощью магии CSS3.

/* скрываем чекбоксы и блоки с содержанием */ .hide, .hide + label ~ div { display: none; } /* вид текста label */ .hide + label { margin: 0; padding: 0; color: green; cursor: pointer; display: inline-block; } /* вид текста label при активном переключателе */ .hide:checked + label { color: red; border-bottom: 0; } /* когда чекбокс активен показываем блоки с содержанием */ .hide:checked + label + div { display: block; background: #efefef; -moz-box-shadow: inset 3px 3px 10px #7d8e8f; -webkit-box-shadow: inset 3px 3px 10px #7d8e8f; box-shadow: inset 3px 3px 10px #7d8e8f; margin-left: 20px; padding: 10px; /* чуточку анимации при появлении */ -webkit-animation:fade ease-in 0.5s; -moz-animation:fade ease-in 0.5s; animation:fade ease-in 0.5s; } /* анимация при появлении скрытых блоков */ @-moz-keyframes fade { from { opacity: 0; } to { opacity: 1 } } @-webkit-keyframes fade { from { opacity: 0; } to { opacity: 1 } } @keyframes fade { from { opacity: 0; } to { opacity: 1 } } .hide + label:before { background-color: #1e90ff; color: #fff; content: "\002B"; display: block; float: left; font-size: 14px; font-weight: bold; height: 16px; line-height: 16px; margin: 3px 5px; text-align: center; width: 16px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .hide:checked + label:before { content: "\2212"; }

По всем раскладам, способ несомненно хорош, но как всегда, даже не удивительно нисколько, проблемы возникают с вечным тормозом прогресса, браузером IE, псевдо-класс checked поддерживают только 9-я и более современные версии этого браузера. Для старых версий IE-шки, остаётся всё по-старому, вам придётся использовать javascript.

Используя скрытые чекбоксы, вы можете легко реализовать , блоки в стиле , слайдеры, галереи и многое другое.

С Уважением, Андрей

Часто в наших проектах нужно привязать определённое действие к действию пользователя. Например при нажатии левой кнопки мыши на определённом диве (блоке) меняется цвет этого блока. Вообще нажатие левой кнопки мыши называется click. Для обработки этого события в основном используется javascript и jquery, но так же есть возможность и с помощью css клик отследить. Об этом мы и поговорим в данном посте. Возникает конечно законный вопрос, зачем ослеживать средствами css click, всё прекрасно работает и с помощью javascript. Но если в браузере пользователя js отключен, то функционал сайта будет не полный, а клик css будет работать всегда. Есть несколько методов обработать событие клик css. Первый из них "checked"

Для начала напишем html и css код.

click me

Если фон красный то чекбокс выбран

Чекбокс выбран

Давайте разберёмся с кодом. У нас три блока.box, .noncheck1, .check. Все они спозиционированны относительно друг друга так что, блок.check находится под.noncheck1. CSS кнопок не стал выкладывать в листинг так как он не важен. И вот начинаем разбираться с методом "checked". Метод основан на использовании элемента checkbox и его атрибута checked. Мы нажимаем на чекбокс и его состояние переходит в чекед. К этому событию с помощью селекторов css "~" или "+" мы привязываем изменение чего либо. Например изменение цвета текста или фона определённого элемента. В примере мы выбираем чекбокс и в диве.box див.noncheck1 становится невидимым (display: none), мы можем видеть див.check. Для того, что бы оформить переключатель состояния фона в виде кнопки мы присваиваем нашему чекбоксу label и уже из него создаём кнопку. Теперь нам чекбокс не нужен (у нас есть кнопка) и мы его скрываем (display: none)

Метод таргет работает по такому принципу. Мы создаём кнопку.butt2 с сылкой On. В ссылке мы назначаем хэш тег "#On". При нажатии на ссылку в виде кнопки с хэштегом происходит переход к диву с id="On". Этот див попадает в target. Происходит активация псевдокласса target. У нас на это событие повешено скрытие дива.noncheck2 так же за счёт display: none. При нажатии на другую ссылку-кнопку див уходит из таргета, так как таргет переходит на другой блок. Див.noncheck2 опять появляется.

Данный метод основан на использовании атрибута tabindex. Он заключается в том, что некоторым элементам вебстраницы мы можем с помощью tabindex задать фокус ввода. Элемент получает событие focus (.butt4:focus) , которое можно обработать средствами css. Мы используя селектор соседей "~" назначаем элементу.noncheck3 состояние display: none, когда у нас происходит событие.butt4:focus. Когда у нас фокус переходит с кнопки на другой элемент страницы.noncheck3 возвращается в изначальное состояние.