Как сделать верстку как на картине?

Question

[Adam Slavo]

Доброго времени суток.
Я начинающий верстальщик, и в процессе верстки наткнулся на вот такое(см. картинку)
Искал, но ничего не нашел относительно того что, как именно сделать выпадающий блок текста и как правильно расположить их, только на css.
Если поможете начинаещему веб разработчику, то буду очень признателен.

Answer 1

[forspamonly2]

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

расположить без изысков: подряд три дива, в каждом сначала заголовок, потом блок с тектом. блоки изначально спрятаны, заголовки видны.

заголовки блоков - это лейблы для спрятанных радиокнопок с одинаковым name. видимость блока определяется селектором следующих элементов, вроде такого: input[checked] ~ div.block { display: block; }

юзер тычет в зголовок, кнопка переключается, прошлый блок сворачивается, новый растопыривается.

Answer 2

[Dymok]

Это называется аккордеон, на codepen можно найти разные реализации

Comments

[Adam Slavo]

Только с помощью js нашел

[Dymok]

Adam Slavo, если нужно на чистом CSS - так и ищите: "css accordeon"

[Darya Shvakh]

Dymok, Добрый день!
Скажите где (на каком ресурсе) можно как-то структурировано познакомиться с названием большинства эффектов для сайта, на вроде:
1) Аккордеон;
2) Слайдер;
3) Карусель;
ну и т.д.
Спасибо!

[Web Developer]

Daria Shvakh, YouTube.com

[Darya Shvakh]

Даниил Коломоец, Аккордеон

[Eugene Chefranov]

Daria Shvakh, здесь есть простые примеры для понимания работы w3.org.ua/jquery/jquery-pishem-akkordeon-s-primene...

[Darya Shvakh]

Eugene Chefranov, Спасибо!
Интересный ресурс!