JavaScriptなしでOK！HTMLタグだけで作るシンプルアコーディオン｜ひろブロ

こんにちは、ひろです！今回は、JavaScriptを使わずにHTMLの特殊なタグだけでアコーディオンを作る方法をご紹介します。

さらに、CSSでのおしゃれな装飾や、オプションとしてのJavaScript活用法についても触れていきますよ。

クリックできる目次

HTMLだけで作れるアコーディオンって？
- 基本的な使い方
CSSでスタイリング
（オプション）JavaScriptで機能拡張
まとめ

HTMLだけで作れるアコーディオンって？

実は、HTMLには <details> と <summary> という便利なタグがあるんです。

これらを使うと、なんとJavaScriptなしでもアコーディオン（開閉可能なコンテンツ）を簡単に作れちゃいます！

以下が完成形です。

See the Pen
アコーディオン by 武田　弘貴 (@hiroki_t1)
on CodePen.

基本的な使い方

<details>
  <summary>クリックして開く</summary>
  <p>ここに隠されたコンテンツが入ります。</p>
</details>

この簡単なコードだけで、クリックして開閉できるアコーディオンの完成です！

JavaScriptは一切必要ありません。便利でしょう？

CSSでスタイリング

HTMLだけのアコーディオンは機能的ですが、見た目はシンプルすぎるかも…。そこでCSSでおしゃれに変身させましょう！

details {
  border: 1px solid #aaa;
  border-radius: 4px;
  padding: .5em .5em 0;
}

summary {
  font-weight: bold;
  margin: -.5em -.5em 0;
  padding: .5em;
  cursor: pointer;
}

details[open] {
  padding: .5em;
}

details[open] summary {
  border-bottom: 1px solid #aaa;
  margin-bottom: .5em;
}

このCSSを適用すると、JavaScriptなしでもアコーディオンがぐっとスタイリッシュになりますよ。

（オプション）JavaScriptで機能拡張

基本的な機能はHTMLとCSSだけで十分ですが、さらに高度な動作を望む場合は、JavaScriptを使って機能を拡張することもできます。例えば、以下のようなことが可能です。

アニメーションの追加
開閉状態の管理
他のアコーディオンとの連動

document.addEventListener('DOMContentLoaded', (event) => {
  const details = document.querySelectorAll('details');
  
  details.forEach((targetDetail) => {
    targetDetail.addEventListener("click", () => {
      details.forEach((detail) => {
        if (detail !== targetDetail) {
          detail.removeAttribute('open');
        }
      });
    });
  });
});

このスクリプトを追加すると、一つのアコーディオンを開いたときに他のアコーディオンが閉じる動作を実装できます。ただし、これはあくまでオプションであり、基本的な機能はJavaScriptなしで実現できることを覚えておいてくださいね。