Розкриття кліку. Подія click на чистому CSS без: target

Спойлер- це блок з інформацією, який спочатку прихований від користувачів і з'являється лише тоді, коли користувач натисне певну кнопку. На моєму сайті у вигляді спойлера зроблено ПРАВИЛАдодавання коментарів. Якщо натиснути слово ПРАВИЛА, яке виділено, то нижче відкриється блок із правилами.

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

Давайте по порядку розберемо кожен із способів, щоб Ви могли застосувати один із них у себе на сайті. Але перед тим, як це зробити, давайте визначимося з бібліотекою jquery. Якщо ви підключали її раніше, то приступайте до перегляду способів, якщо ні, то в шапці або підвалі підключіть.

Тепер поїхали поряд.

Спосіб №1

По суті найпростіший із способів при натисканні блок моментально з'являється. При повторному натисканні миттєво зникає. Все просто. Цей спосібвикористовую і я.

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

Скрипт працює з блоком, у якого присвоєний клас. 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.

Тут як і першому варіанті можна змінити час анімації. За замовчуванням його значення дорівнює 400 мілісекунд. Якщо хочете прискорити або сповільнити, то в дужках додайте значення.
Наприклад: slideToggle(600).

Спосіб №3

Цей спосіб, по суті, як і другий, стій же анімацією, але в ньому є одна цікава фішка. Змінюється кнопка, на яку натиснули для відкриття блоку. У прикладі ви бачили, що це просто текст - Показати текстякий при відкритті блоку змінюється на Приховати текст.
Якщо додати фантазію, можна замість тексту додати картинку чи блок, який прикрасити стилями. Використовується в цьому способі наступна функція.

Змінити час анімації можна за тим самим методом, що й у другому способі.

В принципі все це три основні методи, які я хотів показати. Який саме Вам личить, вирішувати Вам. Тепер Ви зможете без проблем організувати блок, який з'являється після натискання на кнопку.

А Ви використовуєте спойлери у себе на сайті та для чого?

На цьому все, дякую за увагу. 🙂

Чи є спосіб обробляти події на 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; )

Текст кнопки у наведеному вище коді матиме жовте тло, а виведена за натисканням кнопки миші інформація - червоне тло.

У процесі створення сайту або блогу та подальшого його наповнення змістом, різних причин, часом виникає необхідність приховати якусь частину тексту, розмістити більш об'ємну інформацію в захований до певного часу блок, але при цьому все ж таки вказати користувачеві на те, що є ще дещо, і надати йому можливість переглянути прихований зміст без переходу на наступну рядок чи сторінку.
Раніше для реалізації такого рішення використовувалася купа 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- 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; 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- 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: 3x 3px 10px #7d8e8f; -webkit-box-shadow: 3px 3px 10px inset: 3px 3px 10px #7d8e8f;margin-left: 20px;padding:10px;/* трішки анімації при появі */ 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:

Тепер приклад цілком. Щоб не розбирати його частинами і не плутати Вас, прокоментую всі основні моменти прямо в ньому.

Відкрити/сховати інформацію

Не забуваємо, що в даному прикладівідбувається дистанційне підключення jQuery. На локалці без доступу до інтернету приклад працювати не буде.
Дивимося результат роботи відкриття та приховування блоку на jQuery:

Як створити спойлери на jquery чи кілька блоків відкрити/закрити?

На численні прохання читачів створюю окремий розділз прикладом та файлами для скачування. Якщо у Вас кілька блоків-спойлерів, які потрібно плавно відкривати та закривати на jquery, якщо потрібні команди закрити або відкрити все, то дивимося приклад нижче:

Приклад зібраний повністю. Потрібне лише підключення до Інтернету, щоб з Google-бібліотек завантажився jQuery.

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

Метод "checked"

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

.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: 2 height: 100px, display: block, position: absolute; *кнопка*/ font-size: 23px; display: block; ) input(/*приховуємо чекбокс*/ display: none; ) input:checked ~. та нижній шар*/ display: none;

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

Метод "target"

.noncheck2:target( display: none; )

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

Метод "tabindex"

.butt4:focus ~.box .noncheck3 ( display: none; )

Даний метод заснований на використанні атрибуту tabindex. Він полягає в тому, що деяким елементам веб-сторінки ми можемо за допомогою tabindex задати фокус введення. Елемент отримує подію focus (.butt4: focus), яку можна обробити засобами CSS. Ми використовуючи селектор сусідів "~" призначаємо елементу. noncheck3 стан display: none, коли у нас відбувається подія. Коли у нас фокус переходить з кнопки на інший елемент сторінки. noncheck3 повертається до початкового стану.