HTML CSS Как по нажатию кнопки сделать так,чтобы появился блок и чтобы при перефокусировке он не пропадал?

Question

использую :focus display:flex;

Answer 1

В приведённом примере триггером того, что блок необходимо показать является <input type="checkbox"> он скрыт, чтобы не влиять на вёрстку и размещается рядом с любым блоком. Переключение происходит благодаря тегу label, который можно разместить где угодно на странице.

.two {
  display: none
}

input#trigger {
  display: none;
}

input#trigger:checked+div {
  display: block;
}

label {
  box-shadow: 0 0 1px 0;
}

<label for="trigger">Кнопка</label>
<div>
  <div class="one">1</div>
  <input id="trigger" type="checkbox">
  <div class="two">2</div>
  <div class="three">3</div>
</div>

БЛОГ НА HUSL

HTML CSS Как по нажатию кнопки сделать так,чтобы появился блок и чтобы при перефокусировке он не пропадал?

Ответы (1 шт):