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>

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