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

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

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

< div class = "block" > < h1 class = "extremum-click" > Чайники < div class = "extremum-slide" > Этот рассказ про то, как я однажды пошел в лес за грибами и нашел волшебный чайник.

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

.extremum-slide { border : 1px solid ; padding : 50px ; display : none ; } .red { background-color : red ; }

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

$(document) .ready (function () { $(".block" ) .on ("click" , ".extremum-click" , function () { $(this ) .toggleClass ("red" ) .siblings (".extremum-slide" ) .slideToggle (0 ) ; } ) ; } ) ;

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

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

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

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

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

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

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

Способ №1

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

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

$(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. Открывающийся блок появится по диагонали от верхнего левого угла к нижнему правому. Это Вы можете увидеть в примере выше.

Способ №2

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

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

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

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

Способ №3

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

$(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("Показать текст"); } }); });

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

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

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

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

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

Метод "checked"

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

click me

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

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

.box{ width: 200px; height: 100px; background-color: crimson; position: relative; z-index: -10;/*делаем самым нижним слоем*/ margin: 0 auto; margin-top: 50px; } .noncheck1, .noncheck2, .noncheck3{ width: 200px; height: 100px; display: block; position: relative; background-color: lightgrey; z-index: 10px;/*самый верхний слой*/ } .check{ width: 200px; height: 100px; display: block; position: absolute;/*благодаря абсолютн. позиц. смещён под верхний слой*/ top: 1px; left: 1px; z-index: -1;/*средний слой*/ } label{/*кнопка*/ font-size: 23px; display: block; } input{/*скрываем чекбокс*/ display: none; } input:checked ~ .box .noncheck1{/*скрываем верхний слой при чекед, виден средний слой-текст и нижний слой*/ display: none; }

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

Метод "target" On Off .noncheck2:target{ display: none; }

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

Mетод "tabindex" On Off .butt4:focus ~.box .noncheck3 { display: none; }

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

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

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

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

Пример №1

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

Как видите всё более-чем прекрасно работает, скрытое содержание, как появляется без проблем, так и исчезает от легкого нажатия мышкой, и при этом мы задействовали самый минимум исполняемого кода, и в 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-каркас всей коннструкции:

< input class = "hide" id= "hd-1" type= "checkbox" > < label for = "hd-1" > Нажмите здесь, чтобы открыть! < div> Скрытое содержание...... < input class = "hide" id= "hd-2" type= "checkbox" > < label for = "hd-2" > Нажмите здесь, чтобы прочитать больше! < div> Скрытое содержание...

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

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

1. CSS

. hide, . hide + label ~ div { display: none; } /* вид текста label */ . hide + label, . hide: checked + label { padding: 0 ; color: green; cursor: pointer; border- bottom: 1px dotted green; } . 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; }

/* скрываем чекбоксы и блоки с содержанием */ .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.

2. CSS

/* скрываем чекбоксы и блоки с содержанием */ . 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: "\002 B" ; 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: "\221 2" ; }

/* скрываем чекбоксы и блоки с содержанием */ .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.

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

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