###前提・実現したいこと
お忙しいところ恐れ入ります。
調べてもわからなかったので、ご質問させて頂きます。
dtタグのtoggleswitchをクリックした際に、一度目のクリックで、test01を表示させて、
二度目のクリックでtest02を表示させるようにjQueryを記載したいのですが、調べても
わかりませんでした。ご教示頂けないでしょうか。
申し訳ございません。先程回答頂いたのですが、複数DIVにまたがった場合、
別のDIVにも同じJqueryのコードを適応したい場合は、どのようにすればよろしいでしょうか?
###発生している問題・エラーメッセージ
エラーメッセージ
###該当のソースコード
<section class="top"> <div class="box01"> <di> <dd class="test01"> <p>タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</p> <p>・・・・</p> </dd> <dd class="test02"> <p class="fs-22 bold">タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</p> <p class="fs-22">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </dd> <dt class="toggleswitch top-open active"><h5><a href="#">トグルスイッチ</a></h5></dt> </dl> </div> </section> <section class="top"> <div class="box01"> <di> <dd class="test01"> <p>タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</p> <p>・・・・</p> </dd> <dd class="test02"> <p class="fs-22 bold">タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</p> <p class="fs-22">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </dd> <dt class="toggleswitch top-open active"><h5><a href="#">トグルスイッチ</a></h5></dt> </dl> </div> </section>html
1ここにご自身が実行したソースコードを書いてください 2■HTML 3```html 4コード
CSS
.top dt { overflow: hidden; }
.top dt.active:after { background-position: bottom right; }
.top-open { margin: 0 0 2rem 0; }
.top-open:after { display: block; position: absolute; top: 0%; right: 0%; width: 10rem; height: 3rem;}
jQuery
1$('dd').hide(); 2$('.t 3oggleswitch').click(function(){ 4 //$(this).toggleClass("active"); 5 //$(this).siblings("dt").removeClass("active"); 6 //$(this).prev("dd").slideToggle("fast"); 7 //$(this).next("dd").siblings("dd").slideUp("fast"); 8 var test01_toggle = function(){ 9 $("dd.test01").slideToggle("fast",function(){ 10 if(!$(this).is(':visible')) 11 $("dd.test02").slideToggle("fast"); 12 }); 13 }; 14 15 if($("dd.test02").is(':visible')) 16 $("dd.test02").slideToggle("fast", test01_toggle); 17 else 18 test01_toggle(); 19 20});
###試したこと
課題に対してアプローチしたことを記載してください
###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報
回答2件
あなたの回答
tips
プレビュー