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

Question

[MikasaAckerman]

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

Comments

[Ankhena]

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

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

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

Так JS

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

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

[MikasaAckerman]

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

[Виталий Першин]

MikasaAckerman, Блоки бывают разные, например если мы открываем спойлер, это одно, а если модально окно, то совсем другое и требует другого подхода. Из-за того что ты не даешь конкретики, найдешь какой-то костыль, который будешь применять не по назначению.

Answer 1

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

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

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

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

Comments

[MikasaAckerman]

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

[Ankhena]

MikasaAckerman, формально это костыль и использование тегов не по назначению.

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

Ankhena
1. Если label у чекбокса виден, текст контрастен и легко читается, и на него можно навести фокус, то проблем с доступностью не будет.
2. Если правильно стилизовать label, так, чтобы сразу было понятно, нажата кнопка (переключатель) или нет, то и у зрячих людей проблем не будет.

Тогда в чём проблема?

[ImagineTables]

Через body:has(.mybutton:checked) .block было бы нагляднее.

А вообще, правильно сказали: это не относится к стилизации, и надо использовать JS.

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

ImagineTables, Зачем использовать JS, когда можно не использовать JS?

[ImagineTables]

Виктор Кожухарь, для выразительности, разумеется.

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

ImagineTables, Вы правы, для выразительности. Когда люди используют JS там, где он не нужен, мне хочется выражаться)