Лайфхаки

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

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

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

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

  1. <style>
  2. .del { display: none; }
  3. .del:not(:checked) + label + * { display: none; }
  4.  
  5. /* тут редактируем вид кнопки */
  6. .del:not(:checked) + label,
  7. .del:checked + label {
  8. display: inline-block;
  9. padding: 2px 10px;
  10. border-radius: 2px;
  11. color: #fff;
  12. background: #4e6473;
  13. cursor: pointer;
  14. }
  15. .del:checked + label {
  16. background: #e36443;
  17. }
  18. </style>
  19.  
  20. <input type="checkbox" id="raz" class="del"/>
  21. <label for="raz" class="del">Показать скрытый текст</label><div>
  22. <strong>Скрытый текст</strong> </div>

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

Поисковые запросы:
кнопка показать/скрыть html