フラグを使わず複数要素を1つのJavaScript処理で表示非表示させる方法【slideToggle】

フラグを使わず複数要素を1つのJavaScript処理で表示非表示させる方法【slideToggle】

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

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

※必要に応じて書き換えてください。答えのテキスト要素は非表示(display:none;)にしてます。

<style>
body{
	font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"MS Pゴシック",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>

2.繰り返しテキスト用のliタグを記述(HTMLの記述例)

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

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

3.繰り返しテキストクリック時のJavaScritpの記述

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>

 

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

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