HTMLのみで設置可能なアコーディオンメニュー

HTML

目次

アコーディオンメニューとは

アコーディオンメニューとは、何かしらのアクション（マウスを重ねたり、クリックするなど）により、詳細情報や関連するリンクが開閉する項目を指します。

以前まではJavaScriptを使用して実装することが一般的でしたが、HTML5.1よりHTMLだけで実装することができるようになりました。

details（ディテールズ）

開閉させたい項目全体を囲むタグです。

summary（サマリー）

タイトルや質問内容など、初めから表示させておく項目を囲むタグです。

基本的な書き方

HTMLでアコーディオンメニューを作成する場合は「detailsタグ」と「summaryタグ」を使用します。

使い方としては、detailsタグで開閉させたい項目全体を囲み、その中にタイトルや質問内容など、初めから表示させておく項目をsummaryタグで囲みます。アクション後に表示させたい項目はsummaryの終了タグの下に記述するのが一般的です。

HTMLの記述が完了し、ブラウザで表示すると、summaryタグで囲んだ項目の左側に回転して開閉状態を示す小さな三角形が表示され、項目をクリックすると下に消えていた項目が表示されます。

HTML

<!-- 開閉させたい項目全体をdetailsタグで囲む -->
<details>
  <!-- 初めから表示させる項目（タイトルや質問内容など）をsummaryタグで囲む -->
  <summary>タイトルやボタンなど</summary>
  <!-- 開閉させたい項目を入力する -->
  <p>「summary」をクリックするとここが表示される。</p>
</details>

実装

See the Pen details1 by DREAM NET WORKS (@dnw) on CodePen.

三角形を消す

デザインの都合上、summaryタグの左側に表示される三角形を消したい場合はCSSで消すことが可能です。

CSS

/* summaryタグはdisplay:list-itemが初期値として設定されているため、displayを変更することによって矢印を消すことができる */
summary{
  display: block;
}
/* Google ChromeやOperaの対策用ベンダープレフィックス */
summary::-webkit-details-marker{
  display:none;
}

実装

See the Pen details2 by DREAM NET WORKS (@dnw) on CodePen.

ホバー（マウスオーバー）で開く

detailsタグを使用したアコーディオンメニューは標準設定で「クリック or タップ」した時しか反応しません。スマートフォンやタブレットであれば基本動作はタップなので問題ありませんが、PCの場合、ホバーで開閉させたい時があります。

その場合はJavascriptを使用して、ホバーで開閉させるようにすることが可能です。

以下のJavaScriptのコードをHTMLの</body>の直前にscriptタグ（<script></script>）で記述するか、外部ファイルで読み込んでください。

今回はコードを簡潔に記述するためdetailsタグを直接取得していますが、実際に使用する際はクラス名などを設置し、クラス名で取得するほうが良いでしょう。

Javasqript

// detailsタグを取得し、変数に代入
const details = document.querySelectorAll("details");
// 該当する項目全てに設定を反映させるため、for文で繰り返し処理
for ( let i = 0; i < details.length; i++ ) {
  // マウスオーバー時の処理
  details[i].addEventListener("mouseover", function() {
    // detailsタグにopen属性を追加
    details[i].open=true;
  });
  // マウスアウト時の処理
  details[i].addEventListener("mouseleave", function() {
    // detailsタグのopen属性を削除
    details[i].open=false;
  });
}

実装

See the Pen details3 by DREAM NET WORKS (@dnw) on CodePen.

注意点

スマートフォン、タブレットの場合、タップした一瞬がホバー状態となるため、指を離すと開いていた項目が閉じてしまいます。なので、ホバーで開く設定はユーザビリティの観点から、PC用にだけ設定しましょう。

© 2023 DREAM NET WORKS