Как сделать эффект показать/скрыть на CSS без JavaScript

 WPPW |   23.02.2017 в 16:37

Попробуйте следующий код:
HTML

<button class="hide_trigger" tabindex="0">Скрыть</button>
<button class="show_trigger" tabindex="0">Показать</button>
<p class="show_hide_trigger">Тут подопытный</p>

CSS

body {
  display: block;
}

.hide_trigger:focus ~ .show_hide_trigger {
  display: none;
}

.show_trigger:focus ~ .show_hide_trigger {
  display: block;
}