リストタグ(li)の繰り返しテキスト要素があるページで、テキスト要素クリック直後のテキスト要素をslideToggleを使用し表示・非表示させる方法をご紹介します。
処理フラグも必要無く、タグ要素毎に一つ一つ処理を書かなくて良いので便利です。
よくある質問やFAQの質問に対する答えを表示・非表示させるページに使えます。
Contents
ディスプレイ広告
繰り返しテキスト要素の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>
繰り返しテキスト要素(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>
フラグを使わず複数要素を1つのJavaScript処理で表示非表示させるデモページ
フラグを使わず複数要素を1つのJavaScript処理で表示非表示させるデモ
※流用される場合は自己責任でお願いします。