リストタグ(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>
slideToggleを使って繰り返し要素をjQueryで表示・非表示するテキストクリック時のJavaScritp記述
※jquery.min.jsファイルを読み込みます。
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処理で表示非表示させるデモ
※流用される場合は自己責任でお願いします。