Привет, друзья!
Иногда возникает необходимость вставки кода, позволяющего показать или скрыть слой с картинкой или текстом по клику на кнопку. И хотя в Сети много вариантов подобного решения — бОльшая часть из них использует в своем механизме 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>
И, собственно, сам пример работы кода:
Поисковые запросы:
кнопка показать/скрыть html