Отзывчивый аккордеон на чистом CSS

Эта страница была написана на HTML и CSS. Я не использовал Normalize и CSS Reset, префиксы так же прописывал руками, была куча времени, да и объём не особо велик. Вы же, чтобы сэкономить время и нервы, вполне можете использовать все эти полезные инструменты. В последствии все эти знания вам обязательно пригодятся на масштабных проектах.

Ну, а всё что в демо можно легко реализовать в простом HTML и CSS, тем более что вся работа аккордеона построена без подключения javascript.

Вся работа аккордеона построена на использовании скрытых чекбоксов (checkbox) в связке с псевдоклассом checked.

Как видите в примере я использовал миниатюры изображений с возможностью расположения как с левого края так и с правого( увидите в третьей секции аккордеона).

Миниатюрам задан размер в 25% от базового размера изображений используемых в аккордноне, 100% от родительского контейнера, так что изображения будут легко подстраиваться под любые размеры базового блока.

Медиа-запросы использовал для создания гибкого реагирования элемента(аккордеон) на различные размеры экранов пользовательских устройств.

Чтобы отправить миниатюру вправо достаточно в тег img прописать class="img-right, если влево соответственно добпвляем class="img-left.

Размер миниатюр регулируется изменением процентных значений в css.Для этого достаточно найти нужный селектор, например .msg img.img-left и уже в свойстве width: 25%; экспериментировать с значениями

Встроенному изображению, размер которого 100% от родительского контейнера прописываем class="large-img". Реальный размер картинки может быть большим чем секция аккордеона, но она легко впишется в блок аккордеона.

В аккордеоне вы можете использовать встроенное видео с популярных видео хостингов использующих iframe, object, embed. Видео полностью отзывчвы и идеально впишутся в любые размеры блоков аккордеона.