Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. JavaScript
Webdesign

Как создать компонент Аккордеон с помощью CSS и JavaScript

by
Difficulty:BeginnerLength:ShortLanguages:

Russian (Pусский) translation by Anna Goorikova (you can also view the original English article)

В сегодняшнем уроке мы узнаем, как сделать show/hide компонент с использованием CSS и немного JavaScript. По умолчанию jQuery предоставляет метод slideToggle, который позволяет нам создавать аккордеоны с эффектом скольжения. Наша задача состоит в том, чтобы имитировать этот функционал на чистом JavaScript.

Это компонент, который мы будем создавать:

Примечание: эта функциональность изначально предоставляется элементами <details> и <summary>, хотя они еще не поддерживаются браузерами Microsoft.

1. HTML

Начнем с того, что мы определяем элемент с классом container , который содержит два подэлемента:

  • кнопка, которая будет скрывать и показывать содержимое (включая встроенный значок SVG)
  • И сам контент

Вот как это выглядит:

2. CSS

CSS довольно прост. Нам нужно определить два вспомогательных класса (т.е. hide и show).

Чтобы скрыть и выявить целевой элемент, мы будем использовать свойство height, но мы не будем указывать его значения в CSS. Вместо этого мы будем динамически устанавливать значения высоты с помощью JavaScript.

Следует отметить, что мы не используем свойство display для переключения видимости нашего контента. Это свойство не учитывается среди анимационных свойств CSS.

Вот соответствующие стили CSS:

3. JavaScript

Теперь пришло время обсудить, как должен работать наш JavaScript-код.

Во-первых, как только DOM готов, мы получаем высоту элемента .info, а затем сразу же устанавливаем его значение в 0.

Имейте в виду, что в зависимости от вашего содержимого (например, если оно содержит изображения) вам может потребоваться заключить код выше в событие load.

Затем, когда нажата кнопка .toggle-btn, мы делаем следующее:

  • Переключаем видимость элементов .less и .more.
  • Пересчитываем высоту элемента .info. Если это 0 (изначально мы даем это значение), это означает, что контент скрыт, поэтому мы раскрываем его, устанавливая его высоту, равную ее начальной высоте (хранящейся в переменной infoHeight). С другой стороны, если содержимое видимо, мы спрячем его, установив его высоту в 0.
  • Также, мы обеспечиваем, что .toggle-btn будет нажата только один раз, пока анимация слайда не закончится (она длится 500 мс).

Вот код, который реализует такое поведение:

Изменение размера браузера

Следующим шагом нужно убедиться, что компонент будет работать правильно, когда размер окна браузера будет изменен.

Вот необходимый код JS:

4. Поддерживаемые браузеры

Наш пример должен хорошо работать на всех последних браузерах и устройствах. Также, как обычно, мы используем Babel для компиляции кода ES6 до ES5.

Заключение

В этом коротком примере мы создали show/hide компонент в стиле аккордеона с помощью CSS и JavaScript. Благодаря анимированному свойству height нам удалось добавить slide-in/slide-out эффект к нашему компоненту.

Надо отметить, что мы не рассматривали доступность, поэтому, если вы хотите улучшить его функциональность, то это может стать следующим шагом.

Еще учебники «с использованием JavaScript»


Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.