【HTML&JS】JSでdetailsのアコーディオンをカスタマイズする

はじめに

この記事の概要

ウェブデザインにおいて、アコーディオンは情報の階層化やコンテンツの表示・非表示の切り替えに便利なツールです。
最近では、HTMLのdetailsタグを使用することで簡単にアコーディオンを作成することが出来るようになりました。ただ、details タグのみでは実装が難しいケースもあるかと思います。
この記事では、HTMLのdetails タグとJavaScriptを組み合わせて、カスタマイズ性の高いアコーディオンを作成する方法を紹介します。この手法を使えば、スタイルや動作のカスタマイズを容易に行うことができます。

対象読者

基本的なアコーディオンを作成する

detailsの使用方法

まずは、detailsタグの使用方法について紹介します。
detailsタグを使用してアコーディオンを作成する際は、以下のように記述します。

<details>
  <summary>タイトル</summary>
  <p>コンテンツ</p>
</details>

ポイントは、detailsタグの配下にsummaryタグを記述し、summaryタグと同階層にアコーディオンとして開閉したい内容を記述することです。この記述順が異なると正常な挙動にならないため、注意してください。
実際にアコーディオンを開閉する際は、summaryタグに記述した内容をクリックすることでアコーディオンの開閉を行います。
あとは、CSSなどで自分好みのスタイリングを行なっていきます。

detailsで作成したアコーディオンのカスタマイズ

ここからは、details タグで作成したアコーディオンのカスタマイズ方法を紹介します。

デフォルトで表示される矢印を消す

detailsタグでアコーディオンを作成した際には、デフォルトで黒い矢印が表示されます。
デザインによっては、この矢印が邪魔になるため、非表示にする必要があります。
その際はCSSファイルに以下の記述を行います。

/* デフォルトの矢印を非表示にする */
summary::-webkit-details-marker {
  display: none;
}

summary::marker {
  display: none;
}

このCSSコードを適用することで、矢印が非表示になり、アコーディオンの見た目が改善されます。

最初からアコーディオンを開いた状態にする

アコーディオンの内容を最初から表示したい場合は、以下の記述を行います。

<details open>
  <summary>タイトル</summary>
  <p>コンテンツ</p>
</details>

上記のように、detailsタグにopenと記述することで、最初からアコーディオンの内容を表示することが可能です。

アコーディオンを開いた状態と閉じた状態でsummaryの内容を変える

アコーディオンが開いているサイト閉じている状態で、summaryタグの内容を変えたい場合はHTMLとCSSに以下の記述を行います。

<details>
	<summary>
		<span class="open">開く</span>
		<span class="close">閉じる</span>
	</summary>
	<p>コンテンツ</p>
</details>

HTMLでは、summaryタグの中で表示したい内容を2種類用意します。
CSSでは、detailsのopen によって開いている状態と閉じている状態のスタイルをそれぞれ記述します。

JavaScriptを使用したアコーディオンのカスタマイズ

ここからは、JavaScriptを使用したアコーディオンのカスタマイズ方法を紹介します。
detailsタグはアコーディオン作成する際に便利ですが、以下のように文章の途中でアコーディオンを実装したい場合は実装が難しいです。

JavaScriptのみでもアコーディオンを実装可能ですが、SEO対策的にdetailsタグは残しつつアコーディオンを実装したい場合は以下のような記述を行います。

<p>横の[ボタン]で開閉を制御したい<span id="accordion">[ボタン]</span></p>
 <details>
  <summary id="summary"></summary>
   <p>
    コンテンツ内容
   </p>
 </details>

const accordion = document.getElementById("accordion");
const summamry = document.getElementById("summary");

accordion.addEventListener("click", () => {
  summamry.click();
});

コードの解説をします。

HTML側では、まず文章中にある開閉を制御したい内容をspanタグで囲み、idを付与します。今回は[ボタン]にaccordionというidを付与しました。
また、summaryタグにもidを付与します。今回はsummaryというidを付与しました。

続いてJavaScript側の記述です。
最初に先ほどidを付与した2つを変数に入れます。
続いて、accordionにaddEventListenerでクリックイベントを付与します。さらにsummary にclick関数を付与することで、accordionがクリックされた際に、summaryもクリックされるようにしました。
以上の記述で、文章途中でもdetailsタグを使用したアコーディオンの作成が可能です。
実際の挙動は以下のようになります。

さいごに

detailsタグとJavaScriptを組み合わせることで、カスタマイズ性の高いアコーディオンを簡単に作成することができます。この記事では、基本的な作成方法からスタイルや動作のカスタマイズ方法までを解説しました。

アコーディオンは情報を整理し、ユーザーに必要な情報を適切に提示するための重要な要素です。しかし、すべてのウェブサイトに適用できる汎用的なスタイルや動作はありません。そのため、自分のウェブサイトに合わせてアコーディオンをカスタマイズすることは非常に重要です。

この記事では、HTMLのdetailsタグをベースにしたアコーディオンの作成方法を解説しましたが、さらに進んでカスタマイズしたい場合にはJavaScriptを活用することが有効です。JavaScriptを使用することで、クリックイベントやアニメーションを追加することができます。これにより、ユーザビリティを向上させるだけでなく、見た目にも魅力的なアコーディオンを実現できます。

また、アコーディオンのスタイルや動作をさらに拡張する方法も紹介しました。例えば、アイコンの追加や位置のカスタマイズ、複数のセクションを同時に開くことができるアコーディオンの作成などがあります。さらに、既存のプラグインやライブラリを活用することもオプションです。

最後に、ウェブデザインにおいてアコーディオンは重要なツールであり、カスタマイズ性を高めることでユーザー体験を向上させることができます。ぜひこの記事を参考にして、自分のウェブサイトに最適なアコーディオンを作成してみてください。

以上が、カスタマイズ性の高いアコーディオンを作成する方法についてのブログ記事の内容です。ご参考ください。

以下の画像の書籍は、JavaScript初学者の方でも分かりやすく学ぶことができる一冊になっています。
JavaScriptを勉強される際は、ぜひ参考にしてみてください！

スポンサーリンク