JavaScript

jQueryのslideToggleを使って繰り返し要素を表示・非表示【フラグ処理不要】

  /

Web開発の中で、ユーザーインターフェース（UI）をより直感的で使いやすくするために、さまざまなテクニックがあります。特に「よくある質問（FAQ）」ページや、情報をコンパクトにまとめたい場面では、質問や見出しをクリックすると関連する回答や情報が表示・非表示になるインタラクティブなUIは、ユーザー体験を向上させる効果的な方法です。
この記事では、JavaScriptのライブラリであるjQueryのslideToggleメソッドを使って、リスト形式の繰り返しテキスト要素（liタグ）をクリックした際に、次のテキスト要素を表示・非表示にする方法をご紹介します。この方法では、フラグ（状態管理変数）を使わずに、シンプルなコードで複数の要素を一括で処理できます。多くのWebページで利用されている手法なので、わかりやすく応用の幅が広いです。

Contents

CSSによる基本的なスタイリング

まず、繰り返し表示されるテキスト要素のスタイルをCSSで定義します。この例では、クリックして表示・非表示を切り替える部分を質問（`q1`）とし、その下に表示される答えの部分を`q2`としています。デフォルトでは、答えのテキスト部分は非表示（`display:none`）にしてありますが、必要に応じて書き換えることができます。
以下は、CSSの基本的な記述例です。

<style>
body{
	font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
	padding: 0;
	margin: 0;
	overflow-x: hidden;
  line-height: 1.6em;
}
ol, ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
h1{
	font-size:18px;
	line-height:1.6em;
	text-align:center;
	font-weight:normal;
	padding:10px 0;
}
ul{
  width: 250px;
  margin: 30px auto; 
}
ul li{
  padding:0 0 0 40px;
  border-bottom:solid 1px #ccc;
}
ul li .q1{
  font-size:16px;
  font-weight:500;
  position:relative;
  cursor:pointer;
  line-height:36px;
  height: 36px;
}
ul li .q1:before{
  content:'';
  position:absolute;
  width:20px;
  height:2px;
  background-color:#666;
  top:16px;
  left:-34px;
}
ul li .q1:after{
  content:'';
  position:absolute;
  width:2px;
  height:20px;
  background-color:#666;
  top:7px;
  left:-25px;
}
ul li .close:after{
  display:none;
}
ul li .q2{
  font-size:16px;
  display:none;
  border-top: dotted 1px #ccc;
  line-height:40px;
  height:40px;
  color: #007FFF;
  font-weight: bold;
}
</style>

このCSSの目的は、リスト要素の見た目を整えることと、質問テキストをクリックすると答えが表示されるための準備です。答えの部分が非表示であることがポイントです。

HTMLでのリスト要素の記述

次に、HTMLを使って実際のリスト要素を作成します。`li`タグの中に、クリックされる質問部分（`q1`）と、表示・非表示が切り替わる答えの部分（`q2`）を記述します。

<h1>フラグを使わず複数要素を1つのJavaScript処理で表示非表示させるデモページ（slideToggleを使用）</h1>

<div align="center">質問1～3のテキスト部分をクリックして下さい。</div>

      <ul>
        <li>
          <div class="q1">質問1</div>
          <div class="q2">質問1の答えです。</div>
        </li>
        <li>
          <div class="q1">質問2</div>
          <div class="q2">質問2の答えです。</div>
        </li>
        <li>
          <div class="q1">質問3</div>
          <div class="q2">質問4の答えです。</div>
        </li>
      </ul>

<div align="center">各質問に対する隠れていたテキストが表示されます。<br>表示後、もう一度質問テキスト部分クリックすると、質問に対する答えテキスト部分が非表示になります。</div>

このHTML構造では、ulタグを使って質問と答えをリスト形式で並べています。クリック可能な質問部分がq1、表示される答えがq2クラスに割り当てられています。

JavaScriptによるインタラクションの追加

最後に、jquery.min.js（v3.6.0）ファイルを読み込みます。
質問部分をクリックすると答えが表示され、再度クリックすると非表示になる動きを実装します。
`slideToggle`メソッドを使ってスムーズな表示・非表示の切り替えを行い、`toggleClass`を使って質問部分のアイコン（`＋`や`－`）を動的に変更します。

<script src="jquery.min.js"></script>
<script type="text/javascript">
$(function() {
  $('ul li .q1').click(function(){
    $(this).toggleClass("close");
    $(this).next('.q2').slideToggle(100);
  });
});
</script>

このスクリプトは非常にシンプルですが、効果的です。ul li .q1をクリックすると、その直後の要素（q2）がスライドして表示・非表示が切り替わります。また、toggleClassを使って、質問部分のスタイルを動的に変更し、質問が開いているかどうかを視覚的に示すことができます。

フラグを使わず複数要素を1つのJavaScript処理で表示非表示させるデモページ

実際の動作を確認するには、以下のリンクからデモページにアクセスしてください。繰り返し要素が一つのJavaScript処理で表示・非表示される動作を確認できます。

フラグを使わず複数要素を1つのJavaScript処理で表示非表示させるデモ

まとめ

今回紹介した方法は、よくある質問（FAQ）ページや、情報の要約表示が必要な場面で非常に役立ちます。質問の数が増えても、1つのスクリプトで対応できるため、メンテナンスが容易で効率的です。また、ユーザーに対して直感的で使いやすいインターフェースを提供することができるため、Webサイト全体のユーザビリティ向上にも寄与します。

　
※流用される場合は自己責任でお願いします。
　headタグ内のGoogleアナリティクスタグは流用しないで下さい。

slideToggle 表示非表示
関連記事