SnippetUI
← Back to snippets

Accordéon à Ouverture Fluide

Un composant d'accordéon au design épuré, doté d'une animation d'ouverture sans heurts et d'une icône rotative intuitive.

HTMLCSSJavaScript

Aperçu

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

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

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

Cas d’utilisation et fonctionnalités

  • Sections FAQ (Foire aux questions) : Parfait pour structurer et dissimuler élégamment de longues listes de questions-réponses.
  • Menus de configuration complexes : Permet à l’utilisateur de se concentrer sur une section de paramètres à la fois sans être submergé visuellement.
  • Navigation sur mobile : Une solution optimale pour compresser les arborescences de navigation profondes sur des écrans étroits.
  • Exclusivité d’ouverture : Grâce à sa logique d’accordéon classique, l’ouverture d’un panneau ferme automatiquement les autres, maintenant une hauteur de page maîtrisée. L’animation repose sur CSS Grid pour garantir une fluidité impeccable, peu importe le contenu.

Points clés du design et de l’UX

  • Transition Grid révolutionnaire : L’utilisation avant-gardiste de grid-template-rows: 0fr vers 1fr remplace les anciens calculs JavaScript laborieux, offrant une animation d’ouverture/fermeture naturelle et performante.
  • Retour visuel instantané : L’état actif est immédiatement perceptible grâce à un subtil changement de couleur de la bordure et du titre, complété par la rotation à 180 degrés de l’icône chevron.
  • Incitations interactives : Un discret effet de survol (modification de l’ombre portée et de la teinte de la bordure) invite intuitivement l’utilisateur au clic.
  • Accessibilité native : Le statut de chaque section est synchronisé avec l’attribut aria-expanded, assurant une parfaite lisibilité pour les lecteurs d’écran.

Guide de personnalisation

  • Comportement multi-panneaux : Si vous souhaitez permettre l’ouverture simultanée de plusieurs sections, il suffit de supprimer la boucle document.querySelectorAll... présente dans le script JavaScript qui gère la fermeture des autres panneaux.
  • Charte graphique : Personnalisez la teinte #8b5cf6 (violet) appliquée aux classes .accordion-item.active et .accordion-title pour qu’elle épouse la couleur primaire de votre interface.
  • Substitution d’icône : Le chevron SVG par défaut peut être aisément remplacé par n’importe quelle icône de votre bibliothèque favorite (comme Heroicons, Lucide ou FontAwesome), par exemple des icônes “plus/moins”.

Code d’implémentation

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

Compatibilité des navigateurs

  • Chrome : Support complet
  • Firefox : Support complet
  • Safari : Support complet (l’animation grid-template-rows nécessite Safari 16+)
  • Edge : Support complet

Note de compatibilité : Sur les navigateurs archaïques ne supportant pas l’animation via grid-template-rows, l’accordéon fonctionnera toujours parfaitement. Seule l’animation de glissement sera ignorée, provoquant une ouverture/fermeture instantanée (fallback sécurisé).