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

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

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

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

Вот собственно и все - можно наслаждаться результатом. Особо рассказывать нечего: нажимаем на заголовок.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("Показать текст"); } }); });

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

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

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

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

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

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

Достаточно просто. При помощи 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.

Есть ли способ обрабатывать события 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; }

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