Сегодняшний урок будет посвящён одному из самых часто используемых элементов UI - аккордеону. Аккордеон предназначен для более компактного хранения больших текстовых информаций. Таких как: описание товаров, характеристик, условий договоров и т.д. Его интерактивность и незамысловатость привлекают внимание пользователей и тем самым, делают сайт более интересным и запоминающимся. На самом деле, спектр применения аккордеона довольно широк и поэтому, мы оставим на ваш выбор, в каком направлении его использовать.
Для создания аккордеона вам надо перекопировать следующие части кодов:
<div class="accordion"> <div class="element"> <div class="top"> Оглавление 1 </div> <div class="content"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit alias quaerat, possimus reprehenderit dolor molestiae. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit alias quaerat, possimus reprehenderit dolor molestiae. </div> </div> <div class="element"> <div class="top"> Оглавление 2 </div> <div class="content"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit alias quaerat, possimus reprehenderit dolor molestiae. </div> </div> <div class="element"> <div class="top"> Оглавление 3 </div> <div class="content"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit alias quaerat, possimus reprehenderit dolor molestiae. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit alias quaerat, possimus reprehenderit dolor molestiae. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit alias quaerat, possimus reprehenderit dolor molestiae. </div> </div> </div>
.accordion { max-width: 700px; border: none; outline: none; text-align: left; } .accordion .top { position: relative; font-weight: bold; font-size: 18px; color: #000; background-color: rgb(255, 205, 129); transition: all 0.3s linear; padding: 15px 30px 15px 20px; cursor: pointer; } .accordion .top::before { content: ''; position: absolute; top: 50%; right: 17px; transform: translateY(-50%) rotate(40deg); width: 10px; height: 2px; background-color: #000; } .accordion .top::after { content: ''; position: absolute; top: 50%; right: 10px; transform: translateY(-50%) rotate(-40deg); width: 10px; height: 2px; background-color: #000; } .accordion .content { height: 0; color: #000; background-color: #fff; border: 1px solid rgb(255, 205, 129); border-top: none; padding: 0 20px; transition: all 0.5s; overflow: hidden; } .accordion .element:hover .top, .accordion .element.is-open .top{ background-color: rgb(247, 180, 80); } .accordion .element.is-open .content{ height: auto; padding: 10px 20px; } .accordion .element.is-open .top::before { transform: translateY(-50%) rotate(-40deg); } .accordion .element.is-open .top::after { transform: translateY(-50%) rotate(40deg); }
document.querySelectorAll('.accordion .element').forEach(accordionElement => { accordionElement.addEventListener('click', function () { if(!accordionElement.classList.contains('is-open')) { accordionElement.classList.add('is-open'); } else { accordionElement.classList.remove('is-open'); } }); });
После копирования вышеупомянутых кусков кода, у вас должен появиться такой аккордеон:
Количество элементов в аккордеоне может быть разным по вашему желанию. Для этого, можете смело добавлять или удалять блок с классом "element". Все цвета кнопок в CSS можете изменять по своему желанию. Для корректной работы аккордеона, не рекомендуем вносить изменения в структуру html или JavaScript кода.
Расскажем как написать анимированный индикатор для пунктов меню на сайте. Так портал станет более интерактивным и привлекательным для пользователей.
В данном уроке будем стилизовать текст для объявлений об акции. Необходимо сделать так, чтобы наше объявление привлекло потенциальных покупателей
Популярность нейросетей в 2024 году набирает обороты. Нет, они не заменяют полноценных специалистов. Зато существенно упрощают и ускоряют работу тех же копирайтеров, сеошников и дизайнеров.
Сегодня мы расскажем, какие нейросети можно использовать в работе, разберем их функционал и приведем примеры генерации.
Сегодня напишем с вами анимацию карточки-конверта.
*Условия акции: получить приз можно после заключения договора и реализации заказанной услуги.