Возможно ли создать раскрывающийся блок только на CSS?

Question

[Максим Тюльпаков]

Если нельзя, то каким образом сделать вот такой раскрывающийся список, как на картинке (в действиии по ссылке можно посмотреть)

Answer 1

[Антон Нагаец]

Конечно. Все проще чем кажется

<details>
<summary>Заголовок спойлера</summary>
Текст спойлера
</details>

Comments

[Максим Тюльпаков]

Круто )))

[zzamzam]

IE и Firefox не поддерживают
www.w3schools.com/tags/tag_details.asp

[Максим Тюльпаков]

Inlore: спасибо! Это не критично

[Мигель Де Сервантес]

CommanderLow: уже поддерживают, кстати =) Для Edge в разработке ещё.
А IE... а что он вообще поддерживает)

Answer 2

[GreatRash]

codepen.io/GreatRash/pen/RaPJeM

Answer 3

[zzamzam]

Через input type="checkbox" . Отображать блок, если у input`а есть свойство :checked
www.inserthtml.com/2012/04/css-click-states

Answer 4

[Mr Crabbz]

Можно. Заголовки делаете радиокнопками с лабелами. Выпадающий текст - какой нибудь параграф. И далее:
input[type=radio]:active + p { display: inline-block; }

Answer 5

[Алексей Уколов]

Можно, используя скрытые чекбоксы, например.
Если не можете сделать самостоятельно - есть море плагинов, реализующих этот функционал.

Answer 6

[Максим Кузьмин]

https://jqueryui.com/accordion/

Я советую использовать JQuery UI - в реале работы на две-три строчки - просто прописать код в JS. Ну, и конечно, настроить стили CSS для JQuerty UI Accordion.

Comments

[Максим Тюльпаков]

Да дело в том, что это нужно сделать на страничке в битриксе. Как туда с JS влезть еще не разбирался... Ну и как всегда по простому пути следую