Аккордеон с плавным раскрытием

Предпросмотр

このアコーディオンの特徴は？

洗練されたデザインと、スムーズに展開するアニメーションが特徴のコンポーネントです。モダンなCSS技術を使用し、固定の高さやJavaScriptによる複雑な計算に頼ることなく、コンテンツの自然な高さに合わせてシームレスに開閉します。

アニメーションの仕組みは？

CSS Gridを利用しています。grid-template-rowsの値を0frから1frへとトランジションさせることで、モダンブラウザ全体で滑らかで信頼性の高い高さのアニメーションを実現しています。

アクセシビリティ対応は？

はい、対応しています。ボタンには適切なaria-expanded属性が使用されており、スクリーンリーダーなどの支援技術を使用するユーザーにも、各アコーディオンパネルの開閉状態が正しく伝わります。

Сценарии использования и особенности

Секция FAQ (Вопрос-ответ): Классический и наиболее эффективный способ организовать блок часто задаваемых вопросов, экономя пространство на странице.
Панели настроек: Отлично подходит для группировки сложных параметров, позволяя пользователю фокусироваться только на нужном разделе.
Многоуровневая навигация: Незаменим в мобильных меню для компактного отображения вложенных категорий.
Инновационная анимация: В отличие от устаревших подходов с фиксированной высотой (max-height), здесь используется CSS Grid, что обеспечивает абсолютно плавное раскрытие панелей любой высоты. По умолчанию работает по принципу “аккордеона” — при открытии одной панели остальные автоматически закрываются.

Дизайн и UX

Бесшовные переходы: Использование свойства grid-template-rows в сочетании с кривой cubic-bezier создает роскошную, естественную анимацию, с которой приятно взаимодействовать.
Многоуровневый визуальный отклик: Изменение состояния сопровождается не только раскрытием контента, но и поворотом иконки, сменой цвета границ и текста заголовка, что дает пользователю максимальную ясность.
Микроинтеракции при наведении: Легкая тень и изменение оттенка обводки при ховере интуитивно подсказывают, что элемент кликабелен.
Доступность (A11y): Динамическое переключение атрибута aria-expanded обеспечивает полную поддержку скринридеров, делая компонент доступным для всех пользователей.

Кастомизация

Режим независимых панелей: Если вы хотите, чтобы панели открывались независимо друг от друга, просто удалите или закомментируйте блок в JavaScript, отвечающий за закрытие соседних элементов (document.querySelectorAll...).
Брендирование: Замените базовый фиолетовый цвет (#8b5cf6) в селекторах .accordion-item.active и .accordion-title на основной цвет вашего бренда.
Иконки: Стандартную SVG-галочку можно легко заменить на «плюс/минус» или любые другие шевроны из популярных библиотек (например, Lucide или Heroicons).

Исходный код

<div class="accordion-container">
<div class="accordion-item">
  <button class="accordion-header" aria-expanded="false">
    <span class="accordion-title">このアコーディオンの特徴は？</span>
    <span class="accordion-icon">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
    </span>
  </button>
  <div class="accordion-content-wrapper">
    <div class="accordion-content">
      洗練されたデザインと、スムーズに展開するアニメーションが特徴のコンポーネントです。モダンなCSS技術を使用し、固定の高さやJavaScriptによる複雑な計算に頼ることなく、コンテンツの自然な高さに合わせてシームレスに開閉します。
    </div>
  </div>
</div>
<!-- 他のアコーディオンアイテムをここに追加 -->
</div>

<style>
.accordion-container {
max-width: 600px;
width: 100%;
display: flex;
flex-direction: column;
gap: 0.75rem;
font-family: system-ui, -apple-system, sans-serif;
}

.accordion-item {
border: 1px solid #e5e7eb;
border-radius: 12px;
overflow: hidden;
background-color: #ffffff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion-item:hover {
border-color: #d1d5db;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.accordion-item.active {
border-color: #8b5cf6;
box-shadow: 0 4px 12px rgba(139, 92, 246, 0.1);
}

.accordion-header {
width: 100%;
padding: 1.25rem 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
background: none;
border: none;
cursor: pointer;
text-align: left;
color: #1f2937;
}

.accordion-title {
font-weight: 600;
font-size: 1.05rem;
transition: color 0.3s ease;
}

.accordion-icon {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
color: #6b7280;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s ease;
}

.accordion-item.active .accordion-icon {
transform: rotate(180deg);
color: #8b5cf6;
}

.accordion-item.active .accordion-title {
color: #8b5cf6;
}

.accordion-content-wrapper {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion-item.active .accordion-content-wrapper {
grid-template-rows: 1fr;
}

.accordion-content {
overflow: hidden;
padding: 0 1.5rem;
color: #4b5563;
line-height: 1.6;
font-size: 0.95rem;
opacity: 0;
transform: translateY(-8px);
transition: opacity 0.4s ease, transform 0.4s ease, padding 0.4s ease;
}

.accordion-item.active .accordion-content {
padding-bottom: 1.25rem;
opacity: 1;
transform: translateY(0);
}
</style>

<script>
document.querySelectorAll('.accordion-header').forEach(button => {
button.addEventListener('click', () => {
  const item = button.closest('.accordion-item');
  const isExpanded = button.getAttribute('aria-expanded') === 'true';
  
  document.querySelectorAll('.accordion-item').forEach(otherItem => {
    if (otherItem !== item) {
      otherItem.classList.remove('active');
      otherItem.querySelector('.accordion-header').setAttribute('aria-expanded', 'false');
    }
  });

  if (!isExpanded) {
    item.classList.add('active');
    button.setAttribute('aria-expanded', 'true');
  } else {
    item.classList.remove('active');
    button.setAttribute('aria-expanded', 'false');
  }
});
});
</script>

Поддержка браузерами

Chrome: Поддерживается
Firefox: Поддерживается
Safari: Поддерживается (Полная поддержка Grid-анимации доступна начиная с Safari 16+)
Edge: Поддерживается

Примечание: В старых браузерах, не поддерживающих анимацию для grid-template-rows, панели будут открываться и закрываться мгновенно (без плавного перехода), однако базовая функциональность компонента сохранится в полном объеме.