Табы и аккордеоны: как создать интерактивные элементы интерфейса

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

• Веб-дизайнеры и разработчики
• Студенты и профессионалы, желающие улучшить свои навыки в разработке интерфейсов

• Пользователи, интересующиеся созданием современных и удобных веб-сайтов

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

Хотите освоить создание профессиональных интерфейсов с табами и аккордеонами? На Курсе веб-дизайна от Skypro вы научитесь не только верстать интерактивные элементы, но и грамотно применять их в дизайн-системах. Наши студенты создают современные интерфейсы уже через 2 месяца обучения, а к концу курса собирают портфолио из 5+ проектов, включающих сложные интерактивные компоненты, которые впечатляют работодателей!

Что такое табы и аккордеон: основные элементы интерфейса

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

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

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

Михаил Серов, Front-end разработчик Когда я только начинал работать над сайтом для местной пекарни, клиент попросил разместить на одной странице информацию о всех 30 видах хлеба с подробными описаниями и фотографиями. Сначала я разместил всё в линию — получилась бесконечная страница, от скролла которой уставала рука. Решение пришло само собой — я разбил товары на категории и реализовал систему с табами. Первая вкладка — традиционные хлеба, вторая — багеты, третья — сдоба... Клиент был в восторге, а посетители сайта могли быстро найти нужный продукт, не прокручивая всю страницу. Это был мой первый опыт работы с табами, который показал, насколько они могут преобразить пользовательский опыт.

Когда использовать табы, а когда аккордеон? Вот несколько рекомендаций:

• Используйте табы, когда у вас есть 2-7 равнозначных категорий информации, и важно быстрое переключение между ними.
• Выбирайте аккордеон, когда контент имеет иерархическую структуру, или когда у вас много разделов (более 7).
• Табы лучше подходят для десктопных приложений с достаточным пространством экрана.
• Аккордеоны эффективнее на мобильных устройствах из-за вертикальной ориентации и экономии места.

Создание табов на сайте: HTML, CSS и JavaScript

Теперь, когда мы разобрались с теорией, давайте создадим простую систему табов с нуля, используя HTML, CSS и JavaScript. Я разделю процесс на три этапа для большей ясности. 📑

Шаг 1: HTML-структура

Начнем с создания базовой структуры наших табов:

<div class="tabs-container">
<div class="tabs">
<button class="tab-button active" data-tab="tab1">Вкладка 1</button>
<button class="tab-button" data-tab="tab2">Вкладка 2</button>
<button class="tab-button" data-tab="tab3">Вкладка 3</button>
</div>

<div class="tab-content">
<div id="tab1" class="tab-pane active">
<h3>Содержимое вкладки 1</h3>
<p>Здесь находится контент первой вкладки.</p>
</div>

<div id="tab2" class="tab-pane">
<h3>Содержимое вкладки 2</h3>
<p>Контент второй вкладки отображается при её выборе.</p>
</div>

<div id="tab3" class="tab-pane">
<h3>Содержимое вкладки 3</h3>
<p>Информация в третьей вкладке.</p>
</div>
</div>
</div>

Обратите внимание на атрибут data-tab у кнопок — он связывает кнопку с соответствующим содержимым по ID.

Шаг 2: CSS-стилизация

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

.tabs-container {
max-width: 800px;
margin: 0 auto;
font-family: Arial, sans-serif;
}

.tabs {
display: flex;
border-bottom: 1px solid #ddd;
}

.tab-button {
padding: 10px 20px;
background: #f1f1f1;
border: none;
border-radius: 5px 5px 0 0;
cursor: pointer;
margin-right: 5px;
transition: background-color 0.3s;
}

.tab-button:hover {
background-color: #ddd;
}

.tab-button.active {
background-color: #fff;
border: 1px solid #ddd;
border-bottom: 1px solid white;
margin-bottom: -1px;
}

.tab-content {
padding: 20px;
border: 1px solid #ddd;
border-top: none;
}

.tab-pane {
display: none;
}

.tab-pane.active {
display: block;
}

Шаг 3: JavaScript для интерактивности

Теперь добавим JavaScript, чтобы табы реагировали на клики:

document.addEventListener('DOMContentLoaded', function() {
// Получаем все кнопки табов
const tabButtons = document.querySelectorAll('.tab-button');

// Добавляем обработчик клика для каждой кнопки
tabButtons.forEach(button => {
button.addEventListener('click', function() {
// Удаляем класс active у всех кнопок
tabButtons.forEach(btn => btn.classList.remove('active'));

// Добавляем класс active текущей кнопке
this.classList.add('active');

// Получаем ID целевой вкладки
const tabId = this.getAttribute('data-tab');

// Скрываем все панели с контентом
document.querySelectorAll('.tab-pane').forEach(pane => {
pane.classList.remove('active');
});

// Показываем выбранную панель
document.getElementById(tabId).classList.add('active');
});
});
});

Важно помнить о следующих моментах при создании табов:

• Семантика: используйте подходящие HTML-теги для доступности (например, кнопки для вкладок).
• Состояние по умолчанию: всегда делайте одну вкладку активной при загрузке страницы.
• Анимация: добавьте плавные переходы для лучшего пользовательского опыта.
• Доступность: убедитесь, что табы работают с клавиатурой и скринридерами.

Разработка аккордеона от простого к сложному

Аккордеон — это не менее полезный элемент интерфейса, который особенно хорош для отображения больших объемов информации в компактном формате. Давайте создадим простой, но функциональный аккордеон. 🪗

Шаг 1: HTML-разметка аккордеона

<div class="accordion-container">
<div class="accordion-item">
<button class="accordion-header">Раздел 1</button>
<div class="accordion-content">
<p>Содержимое первого раздела аккордеона. Здесь может быть любой HTML-контент.</p>
</div>
</div>

<div class="accordion-item">
<button class="accordion-header">Раздел 2</button>
<div class="accordion-content">
<p>Контент второго раздела. Может содержать текст, изображения, таблицы и другие элементы.</p>
</div>
</div>

<div class="accordion-item">
<button class="accordion-header">Раздел 3</button>
<div class="accordion-content">
<p>Информация третьего раздела аккордеона.</p>
</div>
</div>
</div>

Шаг 2: CSS для аккордеона

.accordion-container {
max-width: 800px;
margin: 0 auto;
font-family: Arial, sans-serif;
}

.accordion-item {
margin-bottom: 5px;
border: 1px solid #ddd;
border-radius: 4px;
}

.accordion-header {
width: 100%;
padding: 15px;
background-color: #f7f7f7;
border: none;
text-align: left;
cursor: pointer;
font-weight: bold;
transition: background-color 0.3s;
position: relative;
}

.accordion-header:hover {
background-color: #ebebeb;
}

.accordion-header::after {
content: '+';
position: absolute;
right: 15px;
font-size: 18px;
transition: transform 0.3s;
}

.accordion-header.active::after {
content: '-';
}

.accordion-content {
padding: 0;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out, padding 0.3s ease;
}

.accordion-header.active + .accordion-content {
padding: 15px;
max-height: 500px;
}

Шаг 3: JavaScript для управления аккордеоном

document.addEventListener('DOMContentLoaded', function() {
// Получаем все заголовки аккордеона
const accordionHeaders = document.querySelectorAll('.accordion-header');

// Добавляем обработчик клика для каждого заголовка
accordionHeaders.forEach(header => {
header.addEventListener('click', function() {
// Переключаем класс active для текущего заголовка
this.classList.toggle('active');

// Вариант 1: Только один открытый раздел (раскомментировать при необходимости)
/*
accordionHeaders.forEach(item => {
if(item !== this) {
item.classList.remove('active');
}
});
*/
});
});
});

Алексей Панов, UX-дизайнер Мы разрабатывали сайт медицинской клиники, где было более 50 различных услуг, каждая с подробным описанием, противопоказаниями и ценами. Изначально всё это было на одной странице, и пациенты жаловались, что невозможно найти нужную информацию. Я предложил использовать аккордеон — сгруппировали услуги по категориям, каждую категорию оформили как раздел аккордеона.

Результат превзошел ожидания: время, которое посетители проводили на странице услуг, увеличилось в 2,5 раза, а количество звонков с вопросами "а сколько стоит..." сократилось на 40%. Самое интересное, что мы отслеживали, какие разделы аккордеона открывают чаще всего, и на основе этих данных перестроили меню сайта, выделив самые популярные услуги. Аккордеон из простого элемента интерфейса превратился в инструмент аналитики пользовательского поведения.

Для аккордеона можно реализовать несколько вариантов поведения:

• Классический аккордеон: в один момент времени открыт только один раздел.
• Мульти-аккордеон: можно открыть несколько разделов одновременно.
• Аккордеон с глубокой вложенностью: внутри разделов могут быть другие аккордеоны.

При разработке более сложных аккордеонов обратите внимание на:

Оптимизация табов и аккордеонов для мобильных устройств

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

Проблемы табов на мобильных устройствах:

• Горизонтальные табы могут не поместиться на экране
• Маленькие кнопки сложно нажимать пальцем
• Текст может быть слишком мелким или обрезаться

Решение 1: Адаптивные табы с горизонтальной прокруткой

/* CSS для адаптивных табов */
@media (max-width: 768px) {
.tabs {
display: flex;
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch; /* Плавный скролл на iOS */
scrollbar-width: none; /* Скрыть скроллбар в Firefox */
}

.tabs::-webkit-scrollbar {
display: none; /* Скрыть скроллбар в Chrome/Safari */
}

.tab-button {
flex: 0 0 auto;
padding: 12px 20px; /* Увеличенная область нажатия */
}
}

Решение 2: Трансформация табов в селект или аккордеон

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

/* Скрываем обычные табы и показываем мобильную версию */
@media (max-width: 576px) {
.tabs-desktop {
display: none;
}

.tabs-mobile {
display: block;
}

.tabs-select {
width: 100%;
padding: 10px;
font-size: 16px;
border: 1px solid #ddd;
border-radius: 4px;
}
}

JavaScript для переключения табов через селект:

document.addEventListener('DOMContentLoaded', function() {
const tabsSelect = document.querySelector('.tabs-select');

if (tabsSelect) {
tabsSelect.addEventListener('change', function() {
const tabId = this.value;

// Скрываем все панели с контентом
document.querySelectorAll('.tab-pane').forEach(pane => {
pane.classList.remove('active');
});

// Показываем выбранную панель
document.getElementById(tabId).classList.add('active');
});
}
});

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

Аккордеоны уже хорошо работают на мобильных устройствах благодаря вертикальному расположению, но можно улучшить их ещё:

• Увеличьте область нажатия заголовков до 44×44px (рекомендация Apple)
• Добавьте отступы внутри контента для улучшения читаемости
• Используйте визуальные индикаторы состояния (иконки + / -)
• Оптимизируйте скорость загрузки, используя ленивую загрузку контента

/* Улучшения для мобильных аккордеонов */
@media (max-width: 768px) {
.accordion-header {
padding: 15px 10px;
min-height: 44px;
}

.accordion-content {
padding: 15px 10px;
font-size: 15px;
line-height: 1.5;
}

/* Увеличиваем контрастность и размер индикаторов */
.accordion-header::after {
font-size: 24px;
right: 10px;
color: #333;
}
}

Стратегия "Прогрессивного улучшения":

Для наилучшего опыта на всех устройствах придерживайтесь подхода прогрессивного улучшения:

1. Создайте базовую версию, работающую даже без JavaScript
2. Добавьте JavaScript для расширенных функций
3. Используйте медиа-запросы для разных устройств
4. Тестируйте на реальных устройствах, не только в эмуляторах

Готовые решения и библиотеки для быстрого внедрения

Не всегда есть время писать табы и аккордеоны с нуля. К счастью, существуют готовые решения, которые можно быстро интегрировать в проект. Рассмотрим наиболее популярные и надёжные варианты. 🛠️

JavaScript-библиотеки для создания табов и аккордеонов:

Пример использования Bootstrap Tabs:

<!-- Подключение Bootstrap CSS и JS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<!-- HTML-разметка для табов -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Главная</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Профиль</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Контакты</button>
</li>
</ul>

<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Содержимое вкладки Главная</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Содержимое вкладки Профиль</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Содержимое вкладки Контакты</div>
</div>

Пример использования jQuery UI Accordion:

<!-- Подключение jQuery и jQuery UI -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">

<!-- HTML-разметка для аккордеона -->
<div id="accordion">
<h3>Раздел 1</h3>
<div>
<p>Содержимое первого раздела аккордеона.</p>
</div>
<h3>Раздел 2</h3>
<div>
<p>Содержимое второго раздела аккордеона.</p>
</div>
<h3>Раздел 3</h3>
<div>
<p>Содержимое третьего раздела аккордеона.</p>
</div>
</div>

<script>
$(function() {
$("#accordion").accordion({
collapsible: true,
heightStyle: "content"
});
});
</script>

CSS-only решения:

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

<!-- CSS-only аккордеон -->
<style>
.css-accordion {
max-width: 500px;
}

.css-accordion-item input {
position: absolute;
opacity: 0;
z-index: -1;
}

.css-accordion-item label {
display: block;
background: #e5e5e5;
cursor: pointer;
padding: 15px;
position: relative;
}

.css-accordion-content {
max-height: 0;
overflow: hidden;
transition: all 0.35s;
}

.css-accordion-item input:checked ~ .css-accordion-content {
max-height: 100vh;
padding: 15px;
}
</style>

<div class="css-accordion">
<div class="css-accordion-item">
<input type="checkbox" id="item1">
<label for="item1">Раздел 1</label>
<div class="css-accordion-content">
<p>Содержимое раздела 1</p>
</div>
</div>

<div class="css-accordion-item">
<input type="checkbox" id="item2">
<label for="item2">Раздел 2</label>
<div class="css-accordion-content">
<p>Содержимое раздела 2</p>
</div>
</div>
</div>

Когда использовать готовые решения:

• В проектах с ограниченным временем разработки — готовые библиотеки существенно экономят время.
• Для сложных требований — многие библиотеки предлагают расширенный функционал, который сложно реализовать самостоятельно.
• В проектах с Bootstrap/Material/другими UI-фреймворками — логично использовать встроенные компоненты для согласованности.

Когда писать свое решение:

• Для нестандартных дизайнов — библиотеки могут быть трудно настраиваемыми.
• Для оптимизации производительности — свой минималистичный код будет работать быстрее.
• Для полного контроля над поведением — без ограничений, накладываемых API библиотеки.
• Для обучения — написание своих компонентов отлично для понимания их работы.

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