Создание аккордеон-блоков: пошаговое руководство для сайта

Для кого эта статья:

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

• Специалисты по UX/UI, стремящиеся оптимизировать пользовательский опыт на своих сайтах.

  Аккордеон-блоки — мощный инструмент для управления информационными потоками на сайте, который значительно улучшает пользовательский опыт. Представьте: вместо бесконечной прокрутки длинных текстов пользователь видит компактные заголовки и сам решает, какую именно информацию развернуть. Это не только оптимизирует пространство на странице, но и дает посетителям контроль над контентом. В этом пошаговом руководстве я расскажу, как реализовать аккордеон-блоки с нуля — от создания HTML-структуры до программирования интерактивного поведения с помощью JavaScript. Готовы сделать свой сайт более интуитивным и удобным? 🔍

Хотите уверенно создавать интерактивные элементы вроде аккордеонов и выйти на новый профессиональный уровень в веб-разработке? Курс Обучение веб-разработке от Skypro — именно то, что вам нужно! Программа построена на практических задачах, включая разработку современных UI-компонентов. Вы не только освоите HTML, CSS и JavaScript, но и научитесь создавать по-настоящему отзывчивые и удобные интерфейсы, которые впечатлят ваших клиентов и работодателей.

Аккордеон-блоки: основные принципы и преимущества

Аккордеон-блоки представляют собой интерактивные элементы интерфейса, которые позволяют отображать или скрывать контент по клику на заголовок. Название происходит от музыкального инструмента аккордеона, который растягивается и сжимается — точно так же ведёт себя этот элемент в интерфейсе. 👆

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

Денис Петров, старший UX-дизайнер Работая над редизайном интернет-магазина с каталогом из 5000+ товаров, я столкнулся с проблемой — пользователи не могли эффективно управлять фильтрами товаров. Длинный список фильтров занимал почти весь экран на мобильных устройствах. Внедрение аккордеон-блоков для категорий фильтров полностью изменило ситуацию: конверсия на мобильных устройствах выросла на 23%, а время, проводимое пользователями в каталоге, увеличилось вдвое. Секрет успеха был прост — теперь покупатели видели только те параметры фильтрации, которые их интересовали в конкретный момент, не отвлекаясь на всё остальное.

Рассмотрим основные преимущества использования аккордеонов на сайте:

• Экономия пространства: особенно ценно для мобильных устройств, где каждый пиксель на вес золота
• Улучшение навигации: пользователи быстрее находят нужную информацию
• Структурированность контента: логическое разделение информации по разделам
• Уменьшение когнитивной нагрузки: пользователь не перегружается информацией
• Интерактивность: повышает вовлеченность посетителей сайта

Перед тем как приступить к созданию аккордеона, необходимо определиться с его стилем и функциональностью. Существует несколько типов поведения:

• Одиночный аккордеон — в один момент времени может быть открыт только один блок
• Множественный аккордеон — пользователь может открывать несколько блоков одновременно
• Вложенный аккордеон — внутри раскрытого блока могут находиться другие аккордеоны

В этом руководстве мы реализуем множественный аккордеон с возможностью открывать несколько блоков, так как это наиболее гибкий вариант, который можно легко адаптировать под другие типы.

Создание базовой структуры HTML для аккордеона

Прежде всего, необходимо создать правильную HTML-структуру, которая станет основой нашего аккордеона. Хорошая разметка должна быть семантичной и доступной даже без JavaScript — это обеспечит работоспособность элемента при различных сценариях использования. 🛠️

Базовая структура аккордеона состоит из двух основных элементов:

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

Вот пример HTML-разметки для аккордеона с тремя блоками:

<div class="accordion">
<!-- Первый блок аккордеона -->
<div class="accordion-item">
<h3 class="accordion-header">
<button class="accordion-button" type="button" aria-expanded="false" aria-controls="content-1">
Раздел 1: Введение
</button>
</h3>
<div id="content-1" class="accordion-content" hidden>
<p>Здесь расположено содержимое первого раздела. Этот текст будет скрыт, 
пока пользователь не нажмет на заголовок.</p>
</div>
</div>

<!-- Второй блок аккордеона -->
<div class="accordion-item">
<h3 class="accordion-header">
<button class="accordion-button" type="button" aria-expanded="false" aria-controls="content-2">
Раздел 2: Основная часть
</button>
</h3>
<div id="content-2" class="accordion-content" hidden>
<p>Содержимое второго раздела будет отображаться только после клика.</p>
</div>
</div>

<!-- Третий блок аккордеона -->
<div class="accordion-item">
<h3 class="accordion-header">
<button class="accordion-button" type="button" aria-expanded="false" aria-controls="content-3">
Раздел 3: Заключение
</button>
</h3>
<div id="content-3" class="accordion-content" hidden>
<p>В этом разделе представлено заключение темы.</p>
</div>
</div>
</div>

Давайте разберем ключевые элементы этой структуры:

• Мы используем семантические теги h3 для заголовков — это важно для SEO и доступности
• Кнопки внутри заголовков имеют атрибуты aria-expanded и aria-controls для обеспечения доступности
• Контентные блоки имеют атрибут hidden, чтобы изначально скрывать содержимое
• ID контентных блоков связаны с кнопками через атрибуты aria-controls

Особое внимание следует уделить атрибутам доступности (ARIA), которые помогают пользователям скринридеров понять структуру и состояние аккордеона:

При создании аккордеона следует придерживаться нескольких важных правил:

• Используйте тег button для заголовков — это обеспечит доступность с клавиатуры
• Каждый раскрывающийся блок должен иметь уникальный ID
• Не злоупотребляйте глубиной вложенности аккордеонов — максимум 2-3 уровня
• При необходимости предусмотрите возможность открывать блоки по умолчанию

Наша HTML-структура готова к стилизации и добавлению интерактивности. Даже без JavaScript и CSS она уже представляет собой доступную разметку, что является хорошей практикой прогрессивного улучшения.

CSS-стилизация аккордеон-блоков для современного дизайна

После создания HTML-структуры необходимо придать аккордеону привлекательный внешний вид с помощью CSS. Ключевая задача стилизации — не только сделать компонент эстетически приятным, но и обеспечить визуальные подсказки для пользователя о том, как взаимодействовать с элементом. 🎨

Вот базовый CSS-код для стилизации нашего аккордеона:

/* Общие стили для контейнера аккордеона */
.accordion {
max-width: 800px;
margin: 2rem auto;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
background-color: #ffffff;
}

/* Стили для отдельных элементов аккордеона */
.accordion-item {
border-bottom: 1px solid #e9e9e9;
}

.accordion-item:last-child {
border-bottom: none;
}

/* Стили для заголовков аккордеона */
.accordion-header {
margin: 0;
}

.accordion-button {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 1.25rem;
font-size: 1.1rem;
font-weight: 600;
text-align: left;
background-color: #ffffff;
border: none;
cursor: pointer;
transition: background-color 0.2s ease;
}

.accordion-button:hover {
background-color: #f8f9fa;
}

/* Добавление иконки-индикатора */
.accordion-button::after {
content: '+';
font-size: 1.5rem;
transition: transform 0.2s ease;
}

.accordion-button[aria-expanded="true"]::after {
content: '−';
transform: rotate(180deg);
}

/* Стили для контентной части */
.accordion-content {
padding: 0 1.25rem;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
}

.accordion-content[hidden] {
display: block;
max-height: 0;
padding-top: 0;
padding-bottom: 0;
}

/* Стили для активного состояния */
.accordion-button[aria-expanded="true"] {
background-color: #f1f8ff;
color: #0077cc;
}

.accordion-content:not([hidden]) {
max-height: 500px;
padding-top: 1rem;
padding-bottom: 1.25rem;
}

Разберем ключевые особенности этого CSS-кода:

• Используем плавные переходы (transition) для анимации открытия/закрытия блоков
• Применяем псевдоэлемент ::after для создания индикатора состояния (плюс/минус)
• Контролируем видимость через max-height вместо display, что позволяет анимировать переход
• Добавляем визуальную обратную связь при наведении и активном состоянии

Анна Соколова, фронтенд-разработчик На одном из проектов мне пришлось реализовать аккордеон для юридической фирмы, где клиенты должны были легко находить информацию по разным типам услуг. Мы экспериментировали с несколькими вариантами дизайна, и наибольший отклик получила версия с минимальной анимацией и четкими визуальными индикаторами. Ключевым моментом стало добавление микровзаимодействий — когда пользователь наводил курсор на заголовок, появлялась едва заметная подсветка, а при клике происходила плавная анимация раскрытия. Тестирование показало, что такой подход увеличил время пребывания на странице на 40% и снизил количество запросов в службу поддержки на 25%.

Для создания более сложных эффектов можно использовать CSS-переменные, которые позволяют легко кастомизировать внешний вид аккордеона:

:root {
--accordion-bg: #ffffff;
--accordion-border: #e9e9e9;
--accordion-header-bg: #f8f9fa;
--accordion-header-active: #f1f8ff;
--accordion-text: #333333;
--accordion-text-active: #0077cc;
--accordion-transition: 0.3s ease;
--accordion-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
--accordion-border-radius: 8px;
}

.accordion {
background-color: var(--accordion-bg);
box-shadow: var(--accordion-shadow);
border-radius: var(--accordion-border-radius);
}

/* Остальные стили с использованием переменных */

Для создания более современного внешнего вида можно использовать различные варианты стилизации:

• Минималистичный стиль — тонкие рамки, неброские цвета, минимум теней
• Material Design — акцентные цвета, эффект поднятия, четкие анимации
• Нейоморфизм — мягкие тени, эффект выдавленности элементов
• Плоский дизайн — отсутствие теней, чистые цвета, четкие формы

При стилизации важно не забывать о состояниях фокуса для обеспечения доступности:

.accordion-button:focus {
outline: 2px solid #0077cc;
outline-offset: 2px;
}

/* Для пользователей, предпочитающих уменьшенное движение */
@media (prefers-reduced-motion: reduce) {
.accordion-button,
.accordion-content {
transition: none;
}
}

JavaScript для оживления аккордеона: код и функционал

После того как мы создали структуру и стили, необходимо добавить интерактивность нашему аккордеону с помощью JavaScript. Именно JS-код позволит пользователям открывать и закрывать блоки контента по клику на заголовки. 🔄

Реализуем базовый JavaScript для управления аккордеоном:

document.addEventListener('DOMContentLoaded', () => {
// Находим все кнопки аккордеона на странице
const accordionButtons = document.querySelectorAll('.accordion-button');

// Добавляем обработчик клика для каждой кнопки
accordionButtons.forEach(button => {
button.addEventListener('click', () => {
// Определяем текущее состояние
const isExpanded = button.getAttribute('aria-expanded') === 'true';

// Получаем ID контентного блока из атрибута aria-controls
const contentId = button.getAttribute('aria-controls');
const content = document.getElementById(contentId);

// Переключаем состояние
button.setAttribute('aria-expanded', !isExpanded);

// Показываем или скрываем контент
if (isExpanded) {
content.setAttribute('hidden', '');
} else {
content.removeAttribute('hidden');
}
});
});
});

Этот код делает следующее:

• Ожидает полной загрузки DOM перед выполнением
• Находит все кнопки аккордеона и добавляет к ним обработчики событий
• При клике определяет текущее состояние и переключает его на противоположное
• Изменяет атрибуты aria-expanded и hidden для обеспечения правильного состояния

Для более продвинутого аккордеона с возможностью закрытия всех других блоков при открытии одного, можно модифицировать код:

document.addEventListener('DOMContentLoaded', () => {
const accordionButtons = document.querySelectorAll('.accordion-button');
const singleExpand = true; // Устанавливаем режим "только один открытый блок"

accordionButtons.forEach(button => {
button.addEventListener('click', () => {
const isExpanded = button.getAttribute('aria-expanded') === 'true';
const contentId = button.getAttribute('aria-controls');
const content = document.getElementById(contentId);

// Если включен режим "один блок" и мы открываем новый блок
if (singleExpand && !isExpanded) {
// Закрываем все другие открытые блоки
accordionButtons.forEach(otherButton => {
if (otherButton !== button && otherButton.getAttribute('aria-expanded') === 'true') {
otherButton.setAttribute('aria-expanded', 'false');
const otherId = otherButton.getAttribute('aria-controls');
document.getElementById(otherId).setAttribute('hidden', '');
}
});
}

// Переключаем состояние текущего блока
button.setAttribute('aria-expanded', !isExpanded);

if (isExpanded) {
content.setAttribute('hidden', '');
} else {
content.removeAttribute('hidden');
}
});
});
});

Для улучшения пользовательского опыта можно добавить плавную анимацию с помощью JavaScript:

// Функция для плавной анимации высоты
function animateHeight(element, from, to, duration) {
const start = performance.now();

function animate(time) {
const elapsed = time – start;
const progress = Math.min(elapsed / duration, 1);
const easeProgress = 0.5 – Math.cos(progress * Math.PI) / 2; // Easing function

element.style.height = `${from + (to – from) * easeProgress}px`;

if (progress < 1) {
requestAnimationFrame(animate);
} else {
// Если анимация завершена и блок открыт, устанавливаем auto для адаптивности
if (to > 0) {
element.style.height = 'auto';
}
}
}

requestAnimationFrame(animate);
}

// Модифицируем код обработчика клика
button.addEventListener('click', () => {
// ... предыдущий код

if (isExpanded) {
// Сохраняем текущую высоту и анимируем до 0
const height = content.offsetHeight;
animateHeight(content, height, 0, 300);
setTimeout(() => {
content.setAttribute('hidden', '');
}, 300);
} else {
// Показываем элемент, измеряем его высоту, затем анимируем
content.removeAttribute('hidden');
content.style.height = '0';
const height = content.scrollHeight;
animateHeight(content, 0, height, 300);
}
});

Для поддержки доступности с клавиатуры необходимо добавить обработку нажатия клавиш:

button.addEventListener('keydown', (e) => {
// Обработка клавиш Space и Enter
if (e.key === ' ' || e.key === 'Enter') {
e.preventDefault();
button.click();
}

// Навигация с помощью стрелок (для группы аккордеонов)
if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
e.preventDefault();
const buttons = Array.from(accordionButtons);
const currentIndex = buttons.indexOf(button);
let nextIndex;

if (e.key === 'ArrowDown') {
nextIndex = (currentIndex + 1) % buttons.length;
} else {
nextIndex = (currentIndex – 1 + buttons.length) % buttons.length;
}

buttons[nextIndex].focus();
}
});

Если вы предпочитаете использовать jQuery, вот эквивалентный код:

$(document).ready(function() {
$('.accordion-button').click(function() {
const isExpanded = $(this).attr('aria-expanded') === 'true';
const contentId = $(this).attr('aria-controls');

// Опционально: закрывать другие блоки
if (!isExpanded) {
$('.accordion-button[aria-expanded="true"]').attr('aria-expanded', 'false')
.each(function() {
$('#' + $(this).attr('aria-controls')).attr('hidden', '');
});
}

$(this).attr('aria-expanded', !isExpanded);

if (isExpanded) {
$('#' + contentId).attr('hidden', '');
} else {
$('#' + contentId).removeAttr('hidden');
}
});
});

Адаптивность и кроссбраузерность: решение проблем

Создание аккордеона, который идеально работает на всех устройствах и во всех браузерах, требует особого внимания к деталям. В этом разделе мы рассмотрим, как сделать наш компонент по-настоящему универсальным и устранить распространенные проблемы. 📱💻

Начнем с адаптивного дизайна. Аккордеон должен корректно отображаться на экранах любого размера от мобильных до десктопных:

/* Базовые адаптивные стили */
.accordion {
width: 100%;
max-width: 800px;
margin: 0 auto;
}

/* Адаптация для мобильных устройств */
@media (max-width: 576px) {
.accordion-button {
padding: 1rem 0.75rem;
font-size: 1rem;
}

.accordion-content {
padding: 0 0.75rem;
}

.accordion-content:not([hidden]) {
padding-top: 0.75rem;
padding-bottom: 1rem;
}
}

/* Адаптация для планшетов */
@media (min-width: 577px) and (max-width: 992px) {
.accordion {
max-width: 90%;
}
}

/* Для устройств с сенсорным экраном увеличиваем области нажатия */
@media (hover: none) {
.accordion-button {
padding: 1.5rem 1rem;
min-height: 48px; /* Минимальная высота для тапа пальцем */
}
}

Распространенные проблемы адаптивности аккордеонов и их решения:

• Проблема: Слишком длинные заголовки выходят за границы экрана Решение: Используйте CSS-свойство word-wrap: break-word и max-width для заголовков

• Проблема: Сложно попасть по заголовку на сенсорных устройствах Решение: Увеличьте padding и размер шрифта для мобильных устройств

• Проблема: Контент с таблицами или изображениями не вписывается в аккордеон Решение: Добавьте overflow-x: auto для контентной части и max-width: 100% для медиаэлементов

Теперь рассмотрим кроссбраузерность. Хотя современные браузеры хорошо поддерживают большинство CSS-свойств, существуют некоторые различия, которые следует учитывать:

/* Решение проблем кроссбраузерности */

/* Поддержка устаревших версий Edge и IE */
.accordion-button {
position: relative;
display: -ms-flexbox;
display: flex;
}

/* Fallback для браузеров без поддержки CSS variables */
.accordion {
background-color: #ffffff;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* Для браузеров, которые не поддерживают hidden */
[hidden] {
display: none !important;
}

/* Обеспечение поддержки анимации в Safari */
.accordion-content {
-webkit-transition: max-height 0.3s ease, padding 0.3s ease;
transition: max-height 0.3s ease, padding 0.3s ease;
}

Для обнаружения и решения проблем с различными браузерами можно использовать feature detection:

// Проверка поддержки CSS-переменных
const supportsCSSVars = window.CSS && window.CSS.supports && window.CSS.supports('(--foo: bar)');

if (!supportsCSSVars) {
// Применить fallback стили
document.documentElement.classList.add('no-css-vars');
}

// Проверка поддержки плавных переходов
const supportsTransitions = 'transition' in document.documentElement.style;

if (!supportsTransitions) {
// Отключить анимации и применить мгновенные изменения
document.documentElement.classList.add('no-transitions');
}

Особое внимание следует уделить тестированию на различных устройствах и браузерах. Вот шпаргалка по часто встречающимся проблемам:

• Safari на iOS: Проблемы с height: auto после анимации — используйте JS для управления высотой
• Старые версии IE: Не поддерживают многие CSS3 свойства — создайте простой fallback
• Firefox: Может некорректно обрабатывать некоторые transition effects — проверяйте визуальные артефакты
• Chrome на Android: Прокрутка внутри аккордеона может быть проблематичной — используйте -webkit-overflow-scrolling: touch

Для обеспечения доступности на различных устройствах не забывайте о:

• Достаточном контрасте между текстом и фоном
• Размере шрифта не менее 16px для основного текста
• Поддержке управления с клавиатуры и screen readers
• Минимальном размере активных элементов 44×44px для сенсорных устройств

В итоге, хорошо реализованный аккордеон должен одинаково хорошо работать на старом компьютере с Internet Explorer, современном MacBook с Chrome и мобильном устройстве с Safari или Chrome — это требует тщательного тестирования и внимания к деталям.

Создание аккордеонов для веб-сайтов — это не просто красивый дизайн-трюк, а мощный инструмент улучшения пользовательского опыта. Правильно реализованные аккордеон-блоки помогают организовать информацию, сохраняя страницы компактными и удобными для навигации. Сочетая семантический HTML, продуманные CSS-стили и интерактивный JavaScript, вы создаете компонент, который делает взаимодействие с контентом более эффективным и приятным. Помните, что лучшие интерфейсы — те, которые интуитивно понятны пользователям на любых устройствах и помогают им быстрее достигать своих целей.