Скрыть открыть блок по клику css. Обработка события click на CSS

Есть ли способ обрабатывать события click на CSS без использования JavaScript. Можно использовать метод с :target . Но что если его нельзя использовать? Есть другой метод.

Посмотрите демонстрацию. Она полностью выполнена на CSS, ни строчки кода JavaScript. В основе лежит оригинальное использование селекторов:active и:hover.

Сначала нужно создать контейнер, который будет содержать кнопку и блоки, выводимые по нажатию мыши. Структура разметки будет примерно такой:

Нужно сделать.content невидимым до тех пор, пока не нажата кнопка мыши на.wrapper . Для решения задачи установим для.content свойство display: none . Затем при нажатии кнопки мыши на.wrapper , будем включать для.content свойство display: block . Для чего установим для.wrapper:active .content свойство display: block . В таком состоянии.content будет видим только когда кнопка мыши нажата. Если ее отпустить, .content снова исчезнет. Для фиксации сделаем так, чтобы при нахождении курсора мыши над.content , элементу присваивалось свойство display: block . То есть устанавливаем для.content:hover свойство display: block . Код CSS будет иметь вид:

Content { display: none; } .wrapper:active .content { display: block; } .content:hover { display: block; }

Остается только "причесать" внешний вид и придать ему наглядности:

Wrapper { position: relative; } .button { background: yellow; height: 20px; width: 150px; } .content { position: absolute; padding-top: 20px; } .content li { background: red; }

Текст кнопки в выше приведенном коде будет иметь желтый фон, а выводимая по нажатию кнопки мыши информация - красный фон.

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

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

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

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

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

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

Большинство из Вас, прочитав заголовок данной статьи, скажут, что обработка события 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 ), то он не будет закрываться. А для того, чтобы кликнув по вкладке, наш курсор автоматически оказался бы и на контенте, мы и расположили кнопку ниже контента, а также сделали ещё и поле сверху. Таким образом, кликнув по названию вкладки, мы кликаем и по контенту тоже, поэтому после клика мы можем смело отпустить кнопку мыши, и у нас продолжит "держать" контент наведение курсора.

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

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

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

Практически на каждом сайте Вы можете увидеть кнопки - Подробнее, Информация, Открыть/Скрыть информацию и подобные им. При нажатии на них плавно раскрывается блок с соответствующей информацией. Как это реализовать?

Достаточно просто. При помощи JS (библиотеки jQuery). Подключим её с сервера Google:

Теперь пример целиком. Чтобы не разбирать его по частям и не путать Вас, прокомментирую все основные моменты прямо в нём.

$(document).ready(function() {
$("A#trigger").toggle(function() {
// Отображаем скрытый блок
$("DIV#box").fadeIn(); // fadeIn - плавное появление

},
function() {
// Скрываем блок
$("DIV#box").fadeOut(); // fadeOut - плавное исчезновение
return false; // не производить переход по ссылке
}); // end of toggle()
}); // end of ready()

Открыть/скрыть информацию
Содержимое скрытого блока

Не забываем, что в данном примере происходит удалённое подключение jQuery. На локалке без доступа в интернет пример работать не будет.
Смотрим результат работы открытия и скрытия блока на jQuery:

Спойлеры

$(document).ready(function(){
$(".spoiler_links").click(function(){
$(this).parent().children("div.spoiler_body").toggle("normal");
return false;
});
});

.spoiler_body {display:none;}
.spoiler_links {cursor:pointer;}

Спойлер №1 показать / скрыть

Текст в первом спойлере
Текст в первом спойлере

Спойлер №2 показать / скрыть

Текст во втором спойлере
Текст во втором спойлере

Пример собран полностью. Нужно лишь только подключение к Интернету, чтобы с Google-библиотек загрузился jQuery.