Как сделать сайт с использованием табов или аккордеона

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

Табы

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

HTML

<div class="tabs">
  <button class="tab-button active" data-target="tab1">Таб 1</button>
  <button class="tab-button" data-target="tab2">Таб 2</button>
  <button class="tab-button" data-target="tab3">Таб 3</button>
</div>

<div class="tab-content">
  <div class="tab-panel active" id="tab1">Содержимое таба 1</div>
  <div class="tab-panel" id="tab2">Содержимое таба 2</div>
  <div class="tab-panel" id="tab3">Содержимое таба 3</div>
</div>

CSS

.tabs {
  display: flex;
}

.tab-button {
  cursor: pointer;
  padding: 10px;
  border: none;
  background: #f1f1f1;
  font-size: 16px;
}

.tab-button:hover,
.tab-button.active {
  background: #ccc;
}

.tab-content {
  padding: 20px;
  border: 1px solid #ccc;
}

.tab-panel {
  display: none;
}

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

JavaScript

document.querySelectorAll('.tab-button').forEach(button => {
  button.addEventListener('click', () => {
    document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active'));
    button.classList.add('active');

    document.querySelectorAll('.tab-panel').forEach(panel => panel.classList.remove('active'));
    document.getElementById(button.dataset.target).classList.add('active');
  });
});

Аккордеоны

Аккордеоны – это вертикальные панели с раскрывающимся контентом, которые позволяют управлять видимостью разделов на странице.

HTML

<div class="accordion">
  <button class="accordion-button active">Аккордеон 1</button>
  <div class="accordion-panel active">Содержимое аккордеона 1</div>
  <button class="accordion-button">Аккордеон 2</button>
  <div class="accordion-panel">Содержимое аккордеона 2</div>
  <button class="accordion-button">Аккордеон 3</button>
  <div class="accordion-panel">Содержимое аккордеона 3</div>
</div>

CSS

.accordion-button {
  cursor: pointer;
  padding: 10px;
  width: 100%;
  text-align: left;
  border: none;
  background: #f1f1f1;
  font-size: 16px;
}

.accordion-button:hover,
.accordion-button.active {
  background: #ccc;
}

.accordion-panel {
  display: none;
  padding: 20px;
  border: 1px solid #ccc;
  border-top: none;
}

.accordion-panel.active {
  display: block;
}

JavaScript

document.querySelectorAll('.accordion-button').forEach(button => {
  button.addEventListener('click', () => {
    button.classList.toggle('active');
    button.nextElementSibling.classList.toggle('active');
  });
});

Теперь вы знаете, как создать сайт с использованием табов и аккордеонов 😊 Успехов в разработке!

Тест на профориентацию

За 10 минут узнайте, как ваш опыт пригодиться в IT индустрии

Подробнее