HTML — показать/скрыть текст

Привет, друзья!

Иногда возникает необходимость вставки кода, позволяющего показать или скрыть слой с картинкой или текстом по клику на кнопку. И хотя в Сети много вариантов подобного решения — бОльшая часть из них использует в своем механизме Java или jquery.

А ведь проблему можно решить и с помощью штатных средств HTML 🙂

<style>
.del { display: none; }
.del:not(:checked) + label + * { display: none; }

/* тут редактируем вид кнопки */
.del:not(:checked) + label,
.del:checked + label {
display: inline-block;
padding: 2px 10px;
border-radius: 2px;
color: #fff;
background: #4e6473;
cursor: pointer;
}
.del:checked + label {
background: #e36443;
}
</style>

<input type=»checkbox» id=»raz» class=»del»/>
<label for=»raz» class=»del»>Показать скрытый текст</label><div>
<strong>Скрытый текст</strong> </div>

И, собственно, сам пример работы кода:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *