複数のアコーディオンを設置し、個々に開閉可能にしたいと考えています。
・デフォルトでは全てが閉じている
・クリックすると、クリックされたものだけ開く
・開いているものは、もう一度クリックすると閉じる
以下のサイトを参考に作成したものの
複数の場合は1つをクリックすると他も全て開いてしまうようです。
https://achiyochi.jp/web/readmore-js/
複数のアコーディオンを実装方法についてご教示いただけますと幸いです。
よろしくお願いします。
発生している問題・エラーメッセージ
エラーメッセージ
該当のソースコード
html
1<div id="text-wrap"> 2 <div class="textarea hide-text"> 3 <p>ここに文字が隠れている</p> 4 </div> 5 <button class="readmore">READ MORE</button> 6</div>
css
1.hide-text { 2 display: none; 3} 4.readmore{ 5 display: block; 6 } 7 8button.readmore{ 9 height: 80px; 10 position: relative; 11 width: 90px; 12 margin: 10px auto; 13 display: block; 14 background-color: transparent; 15 color: #747474; 16 font-size: 11px; 17 letter-spacing: 1px; 18 padding-bottom: 45px; 19 border: none; 20 outline: 0; 21 transition: .5s; 22 -erbkit-transition: .5s; 23 24} 25 26button.readmore::after { 27 content: " "; 28 position: absolute; 29 width: 20px; 30 height: 20px; 31 border-top: solid 1px #747474; 32 border-right: solid 1px #747474; 33 transform: rotate(135deg); 34 -webkit-transform: rotate(135deg); 35 right: 35px; 36 top: 25px; 37 transition: .5s; 38 -erbkit-transition: .5s; 39} 40 41button.readmore:hover::after { 42 top: 40px; 43} 44 45 46.on-click { 47 color: transparent!important; 48} 49 50.on-click { 51 transform: rotate(-180deg); 52 -webkit-transform: rotate(-180deg); 53} 54 } 55
javascript
1$(function(){ 2 $(".readmore").on("click", function() { 3 $(this).toggleClass("on-click"); 4 $(".hide-text").slideToggle(500); 5 }); 6});
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。