Q&A
仕様がわかりません。どの何をどうしたときにどうなってほしいのでしょうか？
前提・実現したいこと
accordion（JS）を使って表題の通りに表示させたい
画像で目的と現状説明します。
目的は、画像のようにはじめだけanswer表示したいのと、＋をーにしたい。
＋をーに
※応用２のようにしたい
+@でnth-of-firstのanswerのみ表示させたい
発生している問題・エラーメッセージ
accordionはできるが、表題の通りにならない
試したこと
・それぞれ調べ、試行錯誤したができなかった。
firstのみ
1//firstのみ 2$(".js-accordion:not(:first-child) .faq-answer").hide();
//+を- $(".faq-question:after").toggleClass("_close"); //クリックされていない.faq-questionの_closeクラスを取る $('.faq-question:after').not(this).removeClass('_close'); // 一つ開くと他は閉じるように $('.faq-question:after').not($(this)).next('.faq-answer').slideUp(); })
該当のソースコード
HTML
1 <dl class="faq-list"> 2 <a class="js-accordion" href="javascript:void(0)"> 3 <dt class="faq-question">Engressはサラリーマンでも学習を続けられるでしょうか？</dt><!-- /.faq-question --> 4 </a> 5 <dd class="faq-answer">TOEFL以外の海外大学合格のサポートもしてもらえるのでしょうか？</dd><!-- /.faq-answer --> 6 <a class="js-accordion" href="javascript:void(0)"> 7 <dt class="faq-question">教材はオリジナルのものを使用しているのでしょうか？</dt><!-- /.faq-question --> 8 </a> 9 <dd class="faq-answer">アンサーテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd><!-- /.faq-answer --> 10 <a class="js-accordion" href="javascript:void(0)"> 11 <dt class="faq-question">講師に日本人はいますか？</dt><!-- /.faq-question --> 12 </a> 13 <dd class="faq-answer">アンサーテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd><!-- /.faq-answer --> 14 <a class="js-accordion" href="javascript:void(0)"> 15 <dt class="faq-question">TOEFL以外の海外大学合格のサポートもしてもらえるのでしょうか？</dt><!-- /.faq-question --> 16 </a> 17 <dd class="faq-answer">アンサーテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd><!-- /.faq-answer --> 18 </a> 19 </dl><!-- /.faq-list -->
CSS
1 2.faq-list { 3 border-bottom: 1px solid #1B224C; 4} 5 6.faq-question { 7 background-color: #fff; 8 border-top: 1px solid #1B224C; 9 text-align: left; 10 -webkit-box-align: center; 11 -webkit-align-items: center; 12 -ms-flex-align: center; 13 align-items: center; 14 padding: 15px 23px 0px; 15 margin-top: 15px; 16 position: relative; 17} 18 19.faq-question._close { 20 -webkit-transform: rotate(0deg); 21 transform: rotate(0deg); 22} 23 24.faq-question._close:after { 25 content: ""; 26 display: block; 27 background-color: #010327; 28 position: absolute; 29 top: 50%; 30 width: 23px; 31 height: 3px; 32 right: 3px; 33 -webkit-transform: rotate(90deg); 34 transform: rotate(90deg); 35 /* display: block; 36 position: absolute; 37 top: 50%; 38 right: 20px; 39 width: 25px; 40 height: 3px; 41 content: ''; 42 background-color: #1B224C; 43 transition-duration: .3s; */ 44} 45 46.faq-question:before { 47 content: ""; 48 display: block; 49 background-color: #010327; 50 position: absolute; 51 top: 50%; 52 width: 23px; 53 height: 3px; 54 right: 3px; 55} 56 57.faq-question:after { 58 content: ""; 59 display: block; 60 background-color: #010327; 61 position: absolute; 62 top: 50%; 63 width: 23px; 64 height: 3px; 65 right: 3px; 66 -webkit-transform: rotate(90deg); 67 transform: rotate(90deg); 68 /* display: block; 69 position: absolute; 70 top: 50%; 71 right: 20px; 72 width: 25px; 73 height: 3px; 74 content: ''; 75 background-color: #1B224C; 76 transition-duration: .3s; */ 77} 78 79.faq-answer { 80 background-color: #F8F8F8; 81 text-align: left; 82 -webkit-box-align: center; 83 -webkit-align-items: center; 84 -ms-flex-align: center; 85 align-items: center; 86 padding: 10px 23px 10px 25px; 87}
js
1 $(function(){ 2 $('.js-accordion').on('click',function(){ 3 $(".js-accordion:not(:first-child) .faq-answer").hide(); 4 $(this).next().slideToggle(); 5 $(".faq-question:after").toggleClass("_close"); 6 //クリックされていない.faq-questionの_closeクラスを取る 7 $('.faq-question:after').not(this).removeClass('_close'); 8 // 一つ開くと他は閉じるように 9 $('.faq-question:after').not($(this)).next('.faq-answer').slideUp(); 10 }) 11 12 });
補足情報（FW/ツールのバージョンなど）
回答1件
0
ちょっと構造がだめっぽいですが、こんな感じで
javascript
1$(function(){ 2 $('.faq-answer').hide(); 3 $('.js-accordion').on('click',function(){ 4 var self=$(this); 5 $(this).next().slideToggle(); 6 $('.faq-question').filter(function(){ 7 return !$(this).closest('.js-accordion').is(self); 8 }).removeClass('_close'); 9 $(this).find('.faq-question').toggleClass('_close'); 10 $('.faq-answer').not($(this).next()).slideUp(); 11 }); 12}); 13
投稿2021/11/26 02:19
総合スコア116734
あなたの回答
tips
プレビュー
