Аккордеон на чистом HTML и CSS
Начнём с разметки. Добавим контейнер для галереи. Так будет проще структурировать элементы.
Добавим первый элемент аккордеона с картинкой яхты, который будет раскрыт по умолчанию.
Добавим описание первого элемента. Описание состоит из заголовка и текста.
Попробуйте закрыть и открыть описание. Для этого нажмите на картинку. По значку маркера можно понять открыт элемент или закрыт.
Добавим второй элемент аккордеона с картинкой, заголовком и текстом с описанием.
Добавим третий элемент аккордеона с изображением рифа, заголовком и описанием карточки.
Добавим базовые стили для галереи. Выстроим карточки в ряд за счёт display: flex. Определим размеры карточек. Ширину картинки подстроим под размеры карточки.
После этого убедимся, что все элементы галереи правильно структурированы и отображаются на странице.
Попробуйте открыть все элементы. А затем закрыть их.
Для всех элементов галереи details добавим одинаковое значение атрибута name. Для того, чтобы объединить их в группу, в которой одновременно может быть открыт только один элемент. Это позволит создать эффект аккордеона, когда открытие одного элемента автоматически приводит к закрытию других элементов в той же группе.
Попробуйте снова открыть и закрыть элементы и посмотрите, что изменилось.
Чтобы управлять стилями открытого элемента, используется селектор .gallery-item[open]. То есть мы выбираем элемент с классом gallery-item, у которого есть атрибут open.
Для начала попробуем менять ширину карточки. Пусть для закрытой карточки ширина будет 100 пикселей, а для открытой — 300.
Продолжим стилизацию.
Уберём значки по умолчанию для маркеров. Добраться до маркера можно через псевдоэлемент ::marker. Для компактности записи используем вложенный селектор.
Элемент с картинкой (<summary>) вынесем в отдельный слой за счёт абсолютного позиционирования. И растянем его по размерам карточки (<details>).
Аналогичным образом картинку разместим на фоне <summary>.
Чтобы картинка не деформировалась и сохраняла свои пропорции, добавим object-fit: cover.
Перейдём к описанию.
С помощью position: relative поместим элемент с описанием в одну стопку с <summary>. Добавим поля. И поменяем цвет текста.
Ещё немного поработаем с карточками.
Добавим скругление. А за счёт overflow: hidden скроем лишнее.
Добавим подсказку для пользователя, о том что элемент интерактивный. Поменяем курсор по умолчанию на pointer.
Чтобы текст лучше читался на фоне изображения, сделаем изображение темнее. Используем для этого CSS-фильтры.
Добавим анимацию перехода.
Будем отслеживать CSS-свойство width для карточки.
А для изображения будем отслеживать CSS-свойство filter.
На финальном шаге добавим стили для состояния Наведение для карточки. С помощью CSS-свойства filter сделаем картинку светлее.
Попробуйте полистать карточки галереи.
Вёрстка галереи завершена!
