Как сделать такое окно который можно открыть с помощью CSS?

Question

[freys]

мб для этого нужна js ?

Comments

[Сергей delphinpro]

https://yandex.ru/search/?text=javascript+accordio...

[Yulia Khavaeva]

Делается два блока, один из них изначально скрыт. На них вещаете событие через класс. Второй блок изначально скрываете, потом через js применяете для него стили.

let spoilerBig = document.querySelectorAll('.spoilers-item__big');
let spoilerBtn = document.querySelectorAll('.isshow');
let spoilerBtnClose = document.querySelectorAll('.isclose');
function spoilerShow() {
spoilerBtn.forEach(e => {
e.addEventListener( "click" , ({target}) => {
target.closest('.spoilers-item').nextSibling.nextSibling.classList.add('is-show');
});
});
spoilerBtnClose.forEach(e => {
e.addEventListener( "click" , ({target}) => {
target.closest('.spoilers-item__big').classList.remove('is-show');
});
})
};
let faqBtns = document.querySelectorAll('.istoggle');
faqBtns.forEach(e => {
e.addEventListener( "click" , ({target}) => {
target.classList.toggle('rotate');
target.closest('.faq__item').nextSibling.nextSibling.classList.toggle('isfaqshow');
});
});
spoilerShow()

Вот старый мой код

[Максим]

Ну либо через чекбокс -в нажатом состоянии блок открыт в со снятом флажком закрыт..

Answer 1

[FKV]

На чистом css можно еще например так https://codepen.io/FETWEB/pen/WNyxJqq. Не идеальный вариант конечно, так как после открытия аккардиона при клике на любой элемент он закроется.

Comments

[FKV]

Да, видел пример. И слышал про эти теги, но пока руки не добирались их поюзать. Так то обычно на js и делаю)