jQueryでアコーディオンを1つだけ開く方法【簡単実装】

jquery アコーディオンひとつだけ

アコーディオンは、コンテンツを折りたたんで表示することで、限られたスペースを有効活用できるUI要素です。複数のコンテンツをアコーディオンで表示する際に、「クリックしたアコーディオンだけを開き、他の開いているアコーディオンは閉じる」という動作は、ユーザーにとって自然で使いやすいインターフェースを実現する上で重要となります。

この記事では、jQueryを使って、複数あるアコーディオンの中から1つだけを開く方法を解説します。シンプルで分かりやすいコード例とともに、初心者の方でも簡単に実装できるように解説しますので、ぜひ参考にしてみてください。

jQueryでアコーディオンを1つだけ開く方法

アコーディオンは、Webサイトやアプリケーションでよく利用されるUI要素の一つです。複数のコンテンツを折りたたんだ状態で表示し、ユーザーが必要なときにクリックして展開することで、スペースを節約しながら多くの情報を表示することができます。

複数のアコーディオンを実装する際、「クリックしたアコーディオンだけを開き、他の開いているアコーディオンは閉じる」という動作は、ユーザーエクスペリエンスの向上に繋がります。この動作により、ユーザーは一度に1つのアコーディオンの内容に集中することができ、混乱を避けることができます。

実装方法

jQueryを使用すると、シンプルで分かりやすいコードで「1つだけ開くアコーディオン」を実装できます。以下に、そのコード例と解説を示します。


<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  $(function() {
    $('.accordion-title').on('click', function() {
      // クリックされたアコーディオン以外のコンテンツを閉じる
      $('.accordion-content').not($(this).next()).slideUp();
      // クリックされたアコーディオンのコンテンツを開閉
      $(this).next().slideToggle();
    });
  });
</script>
<style>
.accordion-title {
  background-color: #eee;
  padding: 10px;
  cursor: pointer;
}
.accordion-content {
  display: none;
  padding: 10px;
}
</style>
</head>
<body>

<h2 class="accordion-title">アコーディオン1</h2>
<div class="accordion-content">
  <p>アコーディオン1の内容です。</p>
</div>

<h2 class="accordion-title">アコーディオン2</h2>
<div class="accordion-content">
  <p>アコーディオン2の内容です。</p>
</div>

<h2 class="accordion-title">アコーディオン3</h2>
<div class="accordion-content">
  <p>アコーディオン3の内容です。</p>
</div>

</body>
</html>

コード解説

上記のコード例では、まず、各アコーディオンのタイトルに共通のクラス「accordion-title」、コンテンツに共通のクラス「accordion-content」を指定しています。そして、jQueryを使って以下のような処理を行っています。

`$('.accordion-title').on('click', function() { ... });` :
このコードは、クラス名が「accordion-title」の要素をクリックした時に実行される関数を定義しています。つまり、各アコーディオンのタイトルをクリックした時の動作を定義しています。
`$('.accordion-content').not($(this).next()).slideUp();` :
このコードは、クリックされたアコーディオン以外のコンテンツを非表示にする処理です。
- `$('.accordion-content')` : 全ての「accordion-content」クラスの要素を選択します。
- `.not($(this).next())` : クリックされた要素の次の要素（アコーディオンのコンテンツ）以外を選択します。
- `.slideUp()` : 選択した要素をslideUpアニメーションで非表示にします。
`$(this).next().slideToggle();` :
このコードは、クリックされたアコーディオンのコンテンツを表示/非表示を切り替える処理です。
- `$(this)` : クリックされた要素（アコーディオンのタイトル）を選択します。
- `.next()` : クリックされた要素の次の要素（アコーディオンのコンテンツ）を選択します。
- `.slideToggle()` : 選択した要素をslideToggleアニメーションで表示/非表示を切り替えます。

まとめ

上記のコードを適用することで、jQueryで簡単に「1つだけ開くアコーディオン」を実装できます。このコードを参考に、アコーディオンのデザインや動作をカスタマイズすることで、よりユーザーフレンドリーなWebサイトやアプリケーションを作成することができます。

この記事が、アコーディオン機能の実装にお困りの方の助けになれば幸いです。

参考文献

jQuery API Documentation

質問	回答
アコーディオンを開いた状態でページを表示するにはどうすれば良いですか？	ページ読み込み時に開きたいアコーディオンのコンテンツに対して、CSSで`display: block;`を設定するか、jQueryの`$(document).ready()`内で`$('.accordion-content').show();`を実行してください。
アコーディオンの開閉アニメーションの速度を変更するにはどうすれば良いですか？	`slideUp()`, `slideDown()`, `slideToggle()`の引数にミリ秒単位でアニメーションの速度を指定できます。例えば、`slideDown(500)`とすると、500ミリ秒かけてアニメーションが実行されます。
アコーディオンの開閉時に別の処理を実行するにはどうすれば良いですか？	`slideUp()`, `slideDown()`, `slideToggle()`の後に実行したい処理を記述します。例えば、`slideDown().done(function() { /* 実行したい処理 / });`とすると、アニメーションが完了した後に`/ 実行したい処理 */`が実行されます。

jQueryでアコーディオンを1つだけ開く方法【簡単実装】

jQueryでアコーディオンを1つだけ開く方法

実装方法

コード解説

まとめ

参考文献

関連QA