Аккордеоны — это популярный шаблон проектирования, используемый в веб-разработке для скрытия и отображения содержимого. Они позволяют пользователям легко перемещаться по большому количеству контента, не перегружая их слишком большим количеством информации одновременно. В этом сообщении блога мы рассмотрим, как создать аккордеон с помощью Tailwind CSS, фреймворка CSS, ориентированного на утилиты.

## Шаг 1: Настройте структуру HTML

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

```html
‹div class="accordion"›
‹div class="accordion-item"›
‹h2 class="accordion-header"›Раздел 1‹/h2›
‹div class="accordion-content"›
‹p›Lorem ipsum dolor sit amet, consectetur adipiscing elit.‹/p›
‹/div›
‹/div ›

‹div class="accordion-item"›
‹h2 class="accordion-header"›Раздел 2‹/h2›
‹div class="accordion- content”›
‹p›Седь еиусмод tempor incididunt ut Labore et dolore magna aliqua.‹/p›
‹/div›
‹/div›

‹div class="accordion-item"›
‹h2 class="accordion-header"›Раздел 3‹/h2›
‹div class="accordion-content"›
‹p ›Ut enim ad minim veniam, quis nostrud exercitation ullamco Laboris nisi ut aliquip ex ea commodo consequat.‹/p›
‹/div›
‹/div›
‹/div›
```

## Шаг 2: Стиль аккордеона с помощью Tailwind CSS

Как только мы настроим структуру HTML, мы можем приступить к стилизации аккордеона с помощью классов CSS Tailwind. Мы будем использовать служебные классы `border`, `bg` и `text`, чтобы создать простой и чистый дизайн.

```html
‹div class=”accordion border-t border-grey-200›
‹div class=”accordion-item”›
‹h2 class=”accordion-header bg -gray-100 text-grey-800 py-4 px-6 курсор-указатель”›Раздел 1‹/h2›
‹div class="accordion-content px-6 py-4›
‹ p class="text-grey-700›Lorem ipsum dolor sit amet, consectetur adipiscing elit.‹/p›
‹/div›
‹/div›

‹div class="accordion-item"›
‹h2 class="accordion-header bg-gray-100 text-grey-800 py-4 px-6 курсор-указатель"›Раздел 2‹/h2›
‹div class=”accordion-content px-6 py-4›
‹p class="text-grey-700›Sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua.‹/p›
‹/div›
‹/div›

‹div class="accordion-item"›
‹h2 class="accordion-header bg-grey-100 text- grey-800 py-4 px-6 курсор-указатель”›Раздел 3‹/h2›
‹div class="accordion-content px-6 py-4›
‹p class="text- grey-700›Ut enim ad minim veniam, quis nostrud exercitation ullamco Laboris nisi ut aliquip ex ea commodo consequat.‹/p›
‹/div›
‹/div›
‹/div ›
```

Мы использовали следующие классы:

- `border-t` и `border-grey-200`: чтобы добавить светло-серую рамку к верхней части аккордеона.
- `bg-gray-100` и ​​`text-grey-800`: чтобы установить цвет фона и текста заголовка аккордеона.
- `py-4` и `px-6`: добавить отступы сверху и снизу (`py-4`), а также слева и справа (`px -6`) заголовка аккордеона.
- `cursor-pointer`: добавить курсор-указатель к заголовку, указывающий, что по нему можно щелкнуть.

  • accordion-content: для оформления содержимого каждого элемента аккордеона.
  • text-gray-700: установить цвет текста внутри содержимого аккордеона.

Шаг 3. Добавьте интерактивности с помощью JavaScript.

Наконец, нам нужно добавить немного JavaScript, чтобы сделать аккордеон интерактивным. Мы будем использовать простой прослушиватель событий click для переключения видимости содержимого при нажатии на заголовок аккордеона.

const accordionHeaders = document.querySelectorAll('.accordion-header');
accordionHeaders.forEach(header => {
  header.addEventListener('click', () => {
    const accordionItem = header.parentNode;
    const accordionContent = accordionItem.querySelector('.accordion-content');
    
    accordionItem.classList.toggle('active');
    accordionContent.classList.toggle('open');
  });
});

Вот что делает код JavaScript:

  • Сначала мы выбираем все заголовки аккордеона, используя метод querySelectorAll.
  • Мы перебираем каждый заголовок, используя метод forEach.
  • Для каждого заголовка мы добавляем прослушиватель событий click, который переключает видимость содержимого.
  • Мы используем методы parentNode и querySelector, чтобы найти элемент аккордеона и его содержимое.
  • Затем мы используем метод classList.toggle для добавления или удаления классов active и open в зависимости от их текущего состояния.

Конечный результат

С HTML, CSS и JavaScript наш аккордеон теперь полностью функционален. Вот как выглядит окончательный результат:

В заключение, создание аккордеона с помощью Tailwind CSS — простой процесс. С помощью служебных классов мы можем легко стилизовать и настроить аккордеон в соответствии с нашими требованиями к дизайну. Добавив несколько строк JavaScript, мы можем сделать аккордеон интерактивным и улучшить взаимодействие с пользователем.