該当のソースコード
<div class="contents12"> <div class="background-thinpink"> <div class="btn"> <img src="./img/flight.png" /> <h3 class="text-left">事前課題の提出</h3> </div> <div class="hidden"><!--隠す場所--> <p>出発前の1ヶ月前に事前課題を送ります。</p> </div> </div> <div class="background-thinpink"> <div class="btn"> <img src="./img/flight.png" /> <h3 class="text-left">現地に渡航</h3> </div> <div class="hidden"> <p> 到着日には空港でお出迎えし、初日のオリエンテーションを行います。滞在先は空港からすぐの出来たてシェアハウス。 美味しいタイ料理などもご紹介します。 </p> </div> </div> </div>
jQuery
1 2$(function () { 3 $('.hidden').hide(); 4 $(".btn").click(function () { 5 $(this).next('.hidden').slideToggle('slow'); 6 $(this).toggleClass('active'); 7 }) 8 9 10}) 11
css
1.btn::after{ 2 content:'▼'; 3 float:right; 4 font-size:20px; 5 margin-top:8px; 6} 7 8.active::after { 9 content: '▲'; 10 float: right; 11 font-size: 20px; 12 margin-top: 8px; 13} 14 15
自分なりに調べてみたのですがどうしても実装できなかったです。
調べたサイトではsiblingsを使ったりしていたのですがHTMLの構造上それも使えないように思えました。
1つずつ開くことはできるのですが、「1つひらくと他が閉じる」、が実装できません。
初歩的な質問ですがご教授いただけるとありがたいです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/04/10 11:13 編集