下記、分からず困っておりますので、わかる方ご教授願えますでしょうか。
自分としては下記のような動作が理想的です。
・accordion-linkのclass名がついた要素をクリックすると、Txtクラスのついた「Read More」を「Close」に変更したい
・その際にbox01内のaccordion-linkをクリックした場合はbox01内のTxtのみCloseにしたい
ですが、現在の状況は
・box01のaccordion-linkを押すと、box01のaccordion-areaが表示される
・box01,box02共にRead More がCloseになってしまう
html
1<div class="box" id="box01"> 2 <a class="accordion-link"><img src="img/img01"></a> 3 <p class="Txt"><a class="accordion-link">Read More</a></p> 4 <div class="accordion-area"></div> 5</div> 6 7<div class="box" id="box02"> 8 <a class="accordion-link"><img src="img/img02"></a> 9 <p class="Txt"><a class="accordion-link">Read More</a></p> 10 <div class="accordion-area"></div> 11</div> 12
js
1 2$(".accordion-link").click(function(){ 3 var profile = $(this).parent().parent().find('.profile') //accordion-linkから見て直近のprofile 4 btnTxt = $(this).closest('.box').find('.Txt') 5 6 profile.slideToggle() ; 7 $(btnTxt).toggleClass('active'); 8 if($(btnTxt).hasClass('active')){ 9 $('.Txt a').text('Close'); 10 }else{ 11 $('.Txt a').text('Read More'); 12 } 13}); 14
以上です。
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/09/26 14:18
2017/09/26 14:31
2017/09/27 01:09
2017/09/27 03:36
2017/09/27 05:03