Аккордеоны и табы: создание без JS или с минимальным JS

Чистый CSS-аккордеон: магия `:target` 🎯

Аккордеоны — это компактные блоки, которые раскрываются при клике. Обычно их делают на JavaScript, но есть хитрость: псевдокласс :target!

Как это работает?
1. Каждый блок аккордеона — это секция с уникальным id.
2. Ссылка с href="#id" при клике активирует :target у нужной секции.
3. Меняем стили для раскрытия контента.

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

.accordion-header a {
  display: block;
  padding: 10px;
  background: #f5f5f5;
  text-decoration: none;
  color: #333;
}

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

.accordion-item:target .accordion-content {
  max-height: 200px; /* Достаточно для контента */
}

HTML-структура:

<div class="accordion">
  <div id="item1" class="accordion-item">
    <div class="accordion-header">
      <a href="#item1">Раздел 1</a>
    </div>
    <div class="accordion-content">
      <p>Скрытый контент здесь!</p>
    </div>
  </div>
</div>

💡 Совет: Для плавности используйте max-height вместо height: auto. Но учтите, что слишком большое значение max-height может сделать анимацию неровной.

Табы на CSS: радио-кнопки в деле 📻

Табы переключают контент без перезагрузки страницы. Решение — скрытые input[type="radio"] и связь с контентом через :checked.

Ключевые моменты:
- Каждая вкладка — это label, привязанная к радио-кнопке.
- Контент табов скрыт, кроме того, чья кнопка в состоянии :checked.

.tabs {
  display: flex;
}

.tab-label {
  padding: 10px 15px;
  background: #eee;
  cursor: pointer;
}

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

.tab-radio:checked ~ .tab-content {
  display: block;
}

.tab-radio:checked + .tab-label {
  background: #fff;
  border-bottom: 2px solid #4CAF50;
}

HTML:

<div class="tabs">
  <input id="tab1" type="radio" name="tabs" class="tab-radio" checked>
  <label for="tab1" class="tab-label">Вкладка 1</label>
  <div class="tab-content">Контент 1</div>

  <input id="tab2" type="radio" name="tabs" class="tab-radio">
  <label for="tab2" class="tab-label">Вкладка 2</label>
  <div class="tab-content">Контент 2</div>
</div>

⚠️ Важно: Все радио-кнопки должны иметь одинаковое name, чтобы работал переключатель.

Минимальный JS для аккордеона 🛠️

Если CSS-решения недостаточно (например, нужно закрыть открытый аккордеон), добавим 3 строчки JavaScript:

document.querySelectorAll('.accordion-header a').forEach(link => {
  link.addEventListener('click', () => {
    const currentItem = link.parentElement.parentElement;
    if (currentItem.classList.contains('active')) {
      currentItem.classList.remove('active');
    } else {
      document.querySelectorAll('.accordion-item').forEach(item => {
        item.classList.remove('active');
      });
      currentItem.classList.add('active');
    }
  });
});

CSS-адаптация:

.accordion-item.active .accordion-content {
  max-height: 200px;
}

Итоги: когда что использовать 🏁

Метод	Плюсы	Минусы
`:target`	Без JS, простота	Нет анимации закрытия
Радио-кнопки	Полноценные табы	Только для вкладок
Минимальный JS	Гибкость, анимации	Требует JavaScript

Выбирайте подход под задачу. Для лендинга с табами подойдет радио-кнопочный вариант, а для FAQ — :target или JS-улучшение.

🎨 Дизайнерам на заметку: Добавьте box-shadow или transform: scale() при открытии для большей интерактивности.

Теперь вы знаете, как создавать аккордеоны и табы почти без JavaScript. Экспериментируйте! 🚀

Аккордеоны и табы: создание без JS или с минимальным JS

Чистый CSS-аккордеон: магия :target 🎯

Табы на CSS: радио-кнопки в деле 📻

Минимальный JS для аккордеона 🛠️

Итоги: когда что использовать 🏁

📘 VK Видео — обучение без ограничений

Чистый CSS-аккордеон: магия `:target` 🎯