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

 

Если вы хотите воспользоваться готовыми решениями, тогда просмотрите предложения от наших партнеров, там вы найдете много вкусного как бесплатного так и по хорошим ценам.

Шаг 1. HTML

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

В демонстрации мы использовали несколько блоков, разметку мы дублировали для добавлении новых блоков внутри нашего контейнера.

Шаг 2. CSS

Начнем по порядку, так как кроме анимации стили у нас будут выполнять всю работу. Добавляем немного обводки вокруг аккордена:

Форматируем текст в середине аккордеона:

Теперь необходимо задать параметры для контейнера, чтобы аккордеон был не на всю страницу:

Стилизируем заголовки, также добавляя плюсики:

Нам необходимо, чтобы плюсики крутились при развертывании, делаем мы это следующим образом:

У нас еще будут стили адаптива, полный их список можете просмотреть в исходниках к данному уроку.

Шаг 3. JS

Теперь нам необходимо добавить немного магии, именно js будет отвечать за красивое развертывания нашего аккордеона:

В результате вот такой замечательный аккордеон с адаптивом у нас получился. Попробуйте его у себя на сайте, и он послужит вам хорошим примером организации контента на сайте.

Вот и все. Готово!