Как сделать так, чтобы при нажатии не исчезало?

Question

[MikasaAckerman]

Не смогла разобраться, как сделать, чтобы при нажатии на кнопку у меня было не одно действие, как в псевдоклассе :active
Допустим, я нажимаю на кнопку: мне надо вывести блок, но он у меня исчезает, если я использую :active.
Нужно, вывести и чтобы он остался, а при повторном нажатии он скрывался. Я так поняла это не CSS, HTML, это JavaScript надо для этого?

Comments

[Ankhena]

Нужно, вывести и чтобы он остался

Вы можете использовать :focus-within

а при повторном нажатии он скрывался

Так JS

[Виктор Кожухарь]

Т.е. вам, фактически нужен переключатель, а не кнопка?
Логика действия кнопки: нажал - она зажата, отпустил - она отжалась.
Логика действия переключателя: нажал один раз - вкл, нажал второй раз - выкл.
Так?

[MikasaAckerman]

Виктор Кожухарь, смотрите. Я хочу сделать, чтобы при нажатии на любой div (пусть будет кнопка), у меня открывался блок и не исчезал, как при :active. Мне нужно использовать переключатели?

Answer 1

[Виктор Кожухарь]

Метод называется checkbox hack.
Мы на самом деле используем checkbox и его превосходное свойство работать даже при нажатии на метку, которая с ним ассоциирована. Таким образом мы скрываем сам нативный checkbox, а его метку стилизуем так, как нам надо, хоть в виде кнопки, хоть в виде чего угодно. И вместо :active у кнопки проверяем :checked у чекбокса
https://css-tricks.com/the-checkbox-hack/

А вот ещё набор идей
https://codepen.io/
В поиске наберите "toggle-switch"

И вот что-то похожее на ваш случай

Comments

[MikasaAckerman]

Спасибо, это то, что нужно.