たった5つの質問に答えるだけで理想の企業に出会えるかも！？

【JavaScript】アコーディオンメニューを実装！クリックでスムーズな開閉効果を実現！【jQuery不要】

SHARE

ハック君
ハック君

編集長(・vv・) アコーディオンメニューを作成したいんですけど以下の内容がわかりません。


・どういった手順で実装するのか
・クリックによる開閉機能と開けた状態をできたら維持したい

UIHACK 編集長
UIHACK 編集長

ハック君(^ ^)質問ありがとう♪
この記事は以下のような人におすすめ！

・JavaScriptを使った開閉メニューのを実装したい
・Jquery無しで実装したい
・開いたまま表示する方法もあれば助かる

ぜひこの記事を参考にして、アコーディオンメニューの実装に取り組んでみてください。

JavaScriptを使った開閉メニューの作成方法や、メニューを開いたままそのまま表示する方法を理解出来ます。
未来に向けて、一歩を踏み出しましょう。

それでは、ご一読ください！

目次

  1. アコーディオンメニューとは？
    1. アコーディオンメニューの特徴
    2. アコーディオンメニューのメリット
  2. JavaScriptを使ったアコーディオンメニューの基本解説
    1. 完成デモ
  3. アコーディオンメニューの開いたまま表示する方法とCSSの設定
    1. 完成デモ
  4. アコーディオンメニューについてよくある Q&A
  5. 結論とまとめ

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

アコーディオンメニューは、Web制作において頻繁に使用されるナビゲーション要素です。クリックすることでコンテンツの開閉を制御するメニュースタイルであり、ユーザーが必要な情報にスムーズにアクセスできるようにするための効果的な手法です。

アコーディオンメニューの特徴

  1. 初めに全てのパネルが閉じている
  2. ユーザーがクリックするとクリックしたパネルが滑らかに展開される
  3. 再度クリックするとパネルは再び閉じます。

アコーディオンメニューのメリット

  1. 必要なコンテンツに素早くアクセスできる
  2. モバイルデバイスにも適しており、スマートフォンやタブレットでの利用においても使いやすい
  3. 報の整理やナビゲーションの改善

JavaScriptを使ったアコーディオンメニューの基本解説

完成デモ

UIHACK 編集長
UIHACK 編集長

解説

クリックイベントが発生した際に、アコーディオンメニューの開閉とアイコンの回転を制御しています。クリックするとメニューが開閉し、同時に矢印アイコンが上下に連動してアニメーションします。

以下で、HTML,CSS,Javascriptそれぞれのコードを説明します。

HTML
<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-header">
      1️⃣メニューアイテム
      <span class="accordion-icon"></span>
    </div>
    <div class="accordion-content">
      <p>メニューアイテム1の内容がここに入ります。</p>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">
      2️⃣ メニューアイテム
      <span class="accordion-icon"></span>
    </div>
    <div class="accordion-content">
      <p>メニューアイテム2の内容がここに入ります。</p>
    </div>
  </div>
  <!-- 追加のメニューアイテムをここに追加 -->
  <div class="accordion-item">
    <div class="accordion-header">
      3️⃣ メニューアイテム
      <span class="accordion-icon"></span>
    </div>
    <div class="accordion-content">
      <p>メニューアイテム2の内容がここに入ります。</p>
    </div>
  </div>
  <!-- 追加のメニューアイテムをここに追加 -->
</div>
UIHACK 編集長
UIHACK 編集長

解説

アコーディオンメニューの基本的な構造を作成しています。
.accordionクラスの要素内に、各メニューアイテムが.accordion-itemクラスで定義されています。メニューアイテムは、.accordion-headerと.accordion-contentの2つの要素で構成されています。また、アコーディオンアイテムのタイトルの後には、矢印アイコンを表示するためのが追加されています。

CSS
.accordion-item {
  border-bottom: 1px solid #ccc;
  margin-bottom: 30px;
  background: #dde6ed;
}

.accordion-header {
  background: #9db2bf;
  padding: 10px;
  cursor: pointer;
  position: relative;
}

.accordion-icon {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 10px;
  height: 10px;
  border-top: 2px solid #f5efe7;
  border-right: 2px solid #f5efe7;
  transform: translateY(-50%) rotate(135deg); /* ここで回転の角度を設定 */
  transition: transform 0.3s ease;
}

.accordion-content {
  display: none;
  padding: 10px;
}
UIHACK 編集長
UIHACK 編集長

解説

CSSのコードでは、アコーディオンメニューのスタイルを定義しています。.accordion-itemクラスでは、アイテム間に区切り線を表示し、マージンを設定しています。.accordion-headerクラスでは、ヘッダーの背景色やパディング、カーソルのスタイルを設定しています。.accordion-iconクラスでは、アイコンの位置やサイズ、回転のスタイルを指定しています。初期状態では、アイコンは下向きに回転しています。

Javascript
// JavaScriptコード
const accordionHeaders = document.querySelectorAll(".accordion-header");

accordionHeaders.forEach((header) => {
  header.addEventListener("click", () => {
    header.classList.toggle("active");
    const accordionContent = header.nextElementSibling;
    const icon = header.querySelector(".accordion-icon");

    if (accordionContent.style.display === "block") {
      accordionContent.style.display = "none";
      icon.style.transform = "translateY(-50%) rotate(135deg)";
    } else {
      accordionContent.style.display = "block";
      icon.style.transform = "translateY(-50%) rotate(-45deg)";
    }
  });
});
UIHACK 編集長
UIHACK 編集長

解説

JavaScriptのコードでは、クリックイベントを監視し、アコーディオンメニューの開閉とアイコンの回転を制御しています。.accordion-headerクラスの要素がクリックされた場合に、clickイベントが発生し、イベントリスナー内のコードが実行されます。クリックされたヘッダーに.activeクラスを付けたり、関連するコンテンツの表示・非表示を切り替えたりしています。また、回転アイコンのスタイルを変更するため、アイコン要素のスタイルのtransformプロパティを調整しています。

まとめ

上記のコードを組み合わせることで、アコーディオンメニューがクリックされた際に開閉し、同時に矢印アイコンが回転する効果が実現されます。必要に応じてスタイルや動作をカスタマイズして、ウェブページに適用してみてください。

アコーディオンメニューの開いたまま表示する方法とCSSの設定

次に、アコーディオンメニューを開いたまま表示するためには、HTMLとCSSを適切に設定する必要があります。以下に、開いたまま表示する方法とそのためのCSS設定を説明します。

完成デモ

UIHACK 編集長
UIHACK 編集長

解説

特定の箇所を開いたまま表示する方法を以下で解説するね。

HTML
<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-header">
      1️⃣メニューアイテム
      <span class="accordion-icon"></span>
    </div>
    <div class="accordion-content">
      <p>メニューアイテム1の内容がここに入ります。</p>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">
      2️⃣ メニューアイテム
      <span class="accordion-icon"></span>
    </div>
    <div class="accordion-content">
      <p>メニューアイテム2の内容がここに入ります。</p>
    </div>
  </div>
  <!-- 追加のメニューアイテムをここに追加 -->
  <div class="accordion-item">
    <div class="accordion-header">
      3️⃣ メニューアイテム
      <span class="accordion-icon"></span>
    </div>
    <div class="accordion-content">
      <p>メニューアイテム2の内容がここに入ります。</p>
    </div>
  </div>
  <!-- 追加のメニューアイテムをここに追加 -->
</div>
UIHACK 編集長
UIHACK 編集長

解説

ここは説明不要かな。「JavaScriptを使ったアコーディオンメニューの基本解説」の章のHTMLと一緒です。

CSS
.accordion-item {
  border-bottom: 1px solid #ccc;
  margin-bottom: 30px;
  background: #dde6ed; /* アコーディオンアイテムの背景色 */
}

.accordion-header {
  background: #9db2bf; /* アコーディオンヘッダーの背景色 */
  padding: 10px;
  cursor: pointer;
  position: relative;
}

.accordion-icon {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 10px;
  height: 10px;
  border-top: 2px solid #f5efe7;
  border-right: 2px solid #f5efe7;
  transform: translateY(-50%) rotate(135deg); /* アイコンの回転角度 */
  transition: transform 0.3s ease; /* アイコンのアニメーション設定 */
}

.accordion-content_open {
  display: block; /* 開いた状態でコンテンツを表示 */
  padding: 10px;
}

.accordion-content {
  display: none; /* 閉じた状態でコンテンツを非表示 */
  padding: 10px;
}
UIHACK 編集長
UIHACK 編集長

解説

開いたまま表示するためのCSS設定は、.accordion-content_openでdisplay: block;を指定しています。これにより、該当するアコーディオンメニューが開いたまま表示されます。

Javascript
// JavaScriptコード
const accordionHeaders = document.querySelectorAll(".accordion-header");

accordionHeaders.forEach((header) => {
  header.addEventListener("click", () => {
    header.classList.toggle("active");
    const accordionContent = header.nextElementSibling;
    const icon = header.querySelector(".accordion-icon");

    if (accordionContent.style.display === "block") {
      accordionContent.style.display = "none";
      icon.style.transform = "translateY(-50%) rotate(135deg)";
    } else {
      accordionContent.style.display = "block";
      icon.style.transform = "translateY(-50%) rotate(-45deg)";
    }
  });
});
UIHACK 編集長
UIHACK 編集長

解説

ここは説明不要かな。「JavaScriptを使ったアコーディオンメニューの基本解説」の章のJavascriptと一緒です。

アコーディオンメニューについてよくある Q&A

UIHACK 編集長
UIHACK 編集長

アコーディオンメニューがうまく開閉しない場合には、以下の対処方法を試してみることがあります：

アコーディオンメニューを使用するメリットは何ですか？
階層が深い場合の情報の整理、スペースの節約、UXの向上など
アコーディオンメニューがうまく開閉しない
・HTMLの構造を確認する：アイテムの階層構造やクラス名、IDなどを確認し、正しい構造になっているかを確認しましょう。
・JavaScriptのコードをチェックする：コンソールエラーをチェックし、必要な修正やデバッグを行いましょう。
アコーディオンメニューの開閉状態を保持したい
・クッキーを使用する方法:クッキーはブラウザにデータを保存するための小さなテキストファイルです。各アコーディオンアイテムの開閉状態をクッキーに保存し、ページが再読み込みされた際にそれらの状態を復元することができます。
・ローカルストレージを使用する方法:ローカルストレージはウェブブラウザにデータを保存するためのAPIです。各アコーディオンアイテムの開閉状態をローカルストレージに保存し、必要な時にその状態を取得して復元することができます。

結論とまとめ

本記事で紹介した

JavaScriptを使ったアコーディオンメニューが、きっと実装できる筈です。

それでは、最後にもう一度、おさらいしましょう。

本記事のおさらい
  • アコーディオンメニューとは？
  • JavaScriptを使ったアコーディオンメニューの基本解説
  • アコーディオンメニューの開いたまま表示する方法とCSSの設定

アコーディオンメニューは、Web制作において高頻度に使用されるナビゲーションメニューです。クリックすることでコンテンツの開閉を制御するメニュースタイルであり情報の整理に役立ちます🎵

JavaScriptを使用した、スクロールアニメーション方法はこちらをご覧ください。

また、ECサイトやコーポレートサイトによく利用するスライドショーに興味がある方はこちら。

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

前の記事

【最大41%OFF！】Ankerファン必見！プライムデー202…

次の記事

【クリック&ホバー】ドロップダウンメニューをJava…