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

リストタグ（li）の繰り返しテキスト要素があるページで、テキスト要素クリック直後のテキスト要素をslideToggleを使用し表示・非表示させる方法をご紹介します。
処理フラグも必要無く、タグ要素毎に一つ一つ処理を書かなくて良いので便利です。
よくある質問やFAQの質問に対する答えを表示・非表示させるページに使えます。

Contents

繰り返しテキスト要素のCSS記述
繰り返しテキスト要素（liタグ）のHTML記述
jQueryのslideToggleを使って繰り返し要素を表示・非表示するテキストクリック時のJavaScritp記述
フラグを使わず複数要素を1つのJavaScript処理で表示非表示させるデモページ

繰り返しテキスト要素のCSS記述

※繰り返しテキスト要素より答えのテキスト要素は非表示（display:none）にしてます。必要に応じて書き換えてください。

<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>

繰り返しテキスト要素（liタグ）のHTML記述

※デフォルトでは答えテキスト「class=”q2″」は非表示（display:none）にしてます。必要に応じて書き換えてください。

<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>

jQueryのslideToggleを使って繰り返し要素を表示・非表示するテキストクリック時のJavaScritp記述

※jquery.min.js（v3.6.0）ファイルを読み込みます。
　toggleClassでclassの追加・削除、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>