Smooth Reveal Accordion

Vista Previa (Preview)

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

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

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

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

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

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

Casos de Uso y Características (Use Cases & Features)

Preguntas Frecuentes (FAQ): La solución de libro para estructurar densos bloques de preguntas y respuestas sin fatigar al usuario.
Paneles de Configuración: Permite empaquetar agrupaciones lógicas de opciones, revelándolas solo cuando el usuario lo demanda.
Estructuras Móviles: Estrategia obligatoria para gestionar menús de navegación profundos en dispositivos con espacio de pantalla restringido.
Mecánica Impecable: Al usar CSS Grid (transicionando grid-template-rows), el componente anima fluidamente su altura sin importar la cantidad de texto, evadiendo los clásicos problemas de cálculo con JavaScript. Incorpora también un patrón “exclusivo” (abrir uno cierra el resto).

Puntos de Diseño y UX (Design & UX)

Transiciones Matemáticas: La alianza entre grid-template-rows y funciones de suavizado cubic-bezier garantiza expansiones orgánicas, libres del temido salto (“jump”) de contenido.
Feedback Multicapa: Los estados activos colorean sutilmente el borde, el título y rotan el chevron. Es imposible que el usuario malinterprete el estado actual del panel.
Microinteracciones Claras: Sombras dinámicas y alteraciones tonales en el estado hover validan de inmediato que la zona es clickeable.
Accesibilidad Robusta: La gestión dinámica del atributo aria-expanded construye un puente sólido para que los lectores de pantalla relaten los eventos de la interfaz sin fallos.

Guía de Personalización (Customization Guide)

Comportamiento Inclusivo: Si prefieres que varios paneles convivan abiertos simultáneamente, basta con purgar del script el bloque responsable de replegar los elementos hermanos.
Inyección de Marca: Reemplaza el acento violáceo (#8b5cf6) disperso en las clases activas con el color corporativo principal de tu paleta.
Sustitución de Iconografía: El chevron SVG nativo es fácilmente reemplazable por cualquier alternativa de tu librería favorita (Lucide, Heroicons), e incluso por patrones de más/menos (+/-).

Código de Implementación (Implementation)

<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>

Compatibilidad de Navegadores (Browser Support)

Chrome / Firefox / Edge: Soporte Nativo.
Safari: Soportado (las transiciones de grid-template-rows se ejecutan perfectamente a partir de Safari 16+).

Nota técnica: En navegadores muy antiguos (legacy), el comportamiento se degrada elegantemente; el acordeón seguirá abriendo y cerrando de manera instantánea, sin romper la usabilidad.