выпадающий блок без display:none
подскажите пожалуйста, можно ли как нибудь сделать выпадающий текстовый блок при нажатии на ссылку без display:none?
|
Изменять opacity и transform?
|
Попробуем в телепатию: вопрос на самом деле "Какие другие возможности скрыть блок, кроме display: none?"
Ответ: вариантов много, например position: absolute; top: -9999px; left:-9999px;или width: 0; height:0; overflow: hidden;... |
Цитата:
|
Цитата:
|
не, бро, слишком много кода, и надо чтобы закрывалось при клике, есть варики поменьше?
|
Цитата:
<style> .dropdown > .dropdown__inner { position: absolute; border-radius: 0.35em; background: rgba(255, 255, 255, 0.8); box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.25); margin: -0.1em; padding: 0.5em; backdrop-filter: blur(8px); opacity: 0; transform: translateY(-8px); pointer-events: none; transition: 300ms; cursor: default; } .dropdown > .dropdown__toggler:focus ~ .dropdown__inner, .dropdown > .dropdown__inner:focus-within { opacity: 1; transform: translateY(0); pointer-events: all; } .dropdown > .dropdown__inner::before { content: ""; position: absolute; top: -100vh; left: 0; right: 0; bottom: 100%; } </style> <div class="dropdown"> <button class="dropdown__toggler">≡ Button</button> <p class="dropdown__inner">Hi, this is a drop down block</p> </div> |
во, классный вариант, ток у меня не меню, а типа faq , как сделать чтобы оставались открытыми вкладки ?
|
javascrip,
добавлять класс кнопкам. |
Часовой пояс GMT +3, время: 19:13. |