HTMLとCSSだけで作るアコーディオン実装ガイドとJavaScript活用例

Webサイトでよく見かけるアコーディオン機能は、HTMLとCSSだけではなく、少しのJavaScriptで簡単に開閉を制御できます。この記事では、基本的なアコーディオンの作り方から、開閉できない場合の修正ポイントまでを具体例とともに解説します。

アコーディオンの基本構造
CSSでのスタイル付け
JavaScriptによる開閉制御
よくある開閉不具合の原因
実践的な改善例
まとめ

アコーディオンの基本構造

アコーディオンは、通常「見出し部分」と「内容部分」の2つの要素で構成されます。見出しをクリックすると内容部分が表示され、再度クリックすると閉じる仕組みです。

HTMLの構造は以下のように整理することが重要です。

<article class="accordion__item">
  <div class="accordion__header">タイトル</div>
  <div class="accordion__body" style="display:none;">内容</div>
</article>

CSSでのスタイル付け

見出しや内容部分のデザインはCSSで設定します。例えば、枠線や色、アイコンの向きなどを工夫することで開閉状態が分かりやすくなります。

注意点として、displayプロパティの初期値を必ず設定すること、アイコン回転のアニメーションにはtransitionを使用することが挙げられます。

JavaScriptによる開閉制御

HTMLとCSSだけでは開閉の挙動を完全に制御できないため、JavaScriptでクリックイベントを追加します。

例として、複数のアコーディオンアイテムにクリックイベントを付与する方法は以下の通りです。

document.querySelectorAll('.accordion__header').forEach(header => {
  header.addEventListener('click', () => {
    const item = header.parentElement;
    const body = header.nextElementSibling;
    const isOpen = item.classList.contains('is-open');

    if(isOpen){
      body.style.display = 'none';
      item.classList.remove('is-open');
    } else {
      body.style.display = 'block';
      item.classList.add('is-open');
    }
  });
});