Q&A
実現したいこと
複数開くアコーディオンメニューで最初のパネルだけ開いて表示させたいです。
java初心者で初歩的な質問ですが宜しくお願いします。
該当のソースコード
sass
1/* faq 2------------------------------------------------------ */ 3.accordion { 4 border-bottom: 1px solid #E5E5E5; 5} 6.faq__question { 7 padding: 20px; 8 font-size: 14px; 9 font-weight: bold; 10 line-height: 1.85; 11 text-align-last: center; 12 background: #fff; 13 border-top: 1px solid #E5E5E5; 14 border-right: 1px solid #E5E5E5; 15 border-left: 1px solid #E5E5E5; 16 color: $c_text2; 17 cursor: pointer; 18 border-collapse: collapse; 19} 20.faq__answer { 21 padding: 25px; 22 font-size: 14px; 23 font-weight: bold; 24 line-height: 1.85; 25 text-align-last: left; 26 background: #F2F2F2; 27 border-top: 1px solid #E5E5E5; 28 border-right: 1px solid #E5E5E5; 29 border-left: 1px solid #E5E5E5; 30 color: $c_text2; 31 border-collapse: collapse; 32} 33/*スクリーンリーダーから隠す*/ 34.visually-hidden { 35 position: absolute; 36 white-space: nowrap; 37 width: 1px; 38 height: 1px; 39 overflow: hidden; 40 border: 0; 41 padding: 0; 42 clip: rect(0 0 0 0); 43 clip-path: inset(50%); 44 margin: -1px; 45 } 46@include medium { 47 .faq__question { 48 padding: 20px 90px 20px 35px; 49 } 50 .faq__answer { 51 padding: 25px 90px 25px 35px; 52 } 53} 54 55/* accordion 56------------------------------------------------------ */ 57.accordion__panel:not(:first-child) { 58 display: none; 59 }
HTML
1<section class="faq"> 2 <div class="section-inner"> 3 <h2 class="section-ttl"> 4 <span class="section-ttl_main">よくある質問</span><!-- /.section-ttl_main --> 5 <span class="section-ttl_sub">faq</span><!-- /.section-ttl_sub --> 6 </h2><!-- /.section-ttl --> 7 8 9 <dl class="accordion faq"> 10 <dt> 11 <button id="accordion1-toggle" class="accordion__toggle faq__question" 12 aria-controls="accordion1-panel" 13 aria-expanded="false"> 14 <span class="faq__q-text">デザインから一貫してお願いすることは可能でしょうか</span> 15 <span class="faq__action"><span class="visually-hidden">回答パネルを開く</span></span> 16 </button> 17 </dt> 18 <dd id="accordion1-panel" class="accordion__panel" 19 aria-hidden="true" 20 aria-labelledby="accordion1-toggle"> 21 <div class="faq__answer"> 22 <div class="faq__a-text"> 23 <p>ユアコーディングはコーディングに特化したサービスですので、デザインからお受けすることは基本的にありません。<br> ただデザインを行う際は提携しているデザイナーと連携して対応させていただきますので、別途ご連絡ください。</p> 24 </div> 25 </div> 26 </dd> 27 28 <dt> 29 <button id="accordion2-toggle" class="accordion__toggle faq__question" 30 aria-controls="accordion2-panel" 31 aria-expanded="false"> 32 <span class="faq__q-text">WordPressのカスタマイズをお願いすることも可能でしょうか？</span> 33 <span class="faq__action"><span class="visually-hidden">回答パネルを開く</span></span> 34 </button> 35 </dt> 36 <dd id="accordion2-panel" class="accordion__panel" 37 aria-hidden="true" 38 aria-labelledby="accordion2-toggle"> 39 <div class="faq__answer"> 40 <div class="faq__a-text"> 41 <p>可能です。ただECサイトなどの場合は構築難易度や工数の関係で綿密にヒアリングさせていただきたく思います。</p> 42 </div> 43 </div> 44 </dd> 45 46 <dt> 47 <button id="accordion3-toggle" class="accordion__toggle faq__question" 48 aria-controls="accordion3-panel" 49 aria-expanded="false"> 50 <span class="faq__q-text">コーディングのスピード感が知りたい</span> 51 <span class="faq__action"><span class="visually-hidden">回答パネルを開く</span></span> 52 </button> 53 </dt> 54 <dd id="accordion3-panel" class="accordion__panel" 55 aria-hidden="true" 56 aria-labelledby="accordion3-toggle"> 57 <div class="faq__answer"> 58 <div class="faq__a-text"> 59 <p>HTMLレスポンシブ込み5ページで1週間、10ページで2週間、WordPressサイト5ページで2週間、10ページで3週間が目安になります。</p> 60 </div> 61 </div> 62 </dd> 63 64 </dl> 65 66 67 </div><!-- /.section-inner --> 68 69 </section><!-- /.faq -->
js
1 // アコーディオン 2 //-------------------------------------------- 3 //ariaを利用した汎用的に使えるアコーディオン用スクリプトにしてあります。 4 function accordion() { 5 $('[aria-controls^="accordion"]').stop().on('click', function (e) { 6 const $self = $(e.currentTarget); 7 const expanded = $self.attr('aria-expanded'); 8 const $target = $('#' + $self.attr('aria-controls')); 9 10 11 if (expanded === 'false') { 12 $self.attr('aria-expanded', true); 13 $target.attr('aria-hidden', false).slideDown(); 14 } else { 15 $self.attr('aria-expanded', false); 16 $target.attr('aria-hidden', true).slideUp(); 17 } 18 }); 19 } 20 accordion(); 21});
試したこと
SCSSに.accordion__panel:not(:first-child) { display: none;}で指示すると全て消えてしまう。
jQueryに$('.open-5:not(:first)').hide();を指示すると全て開いている。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答1件
0
ベストアンサー
CSSセレクターの指定間違いですね。
アコーディオン内(.accordion)の要素は dt dd dt dd ・・・となってますので
最初のパネル(dd要素)は最初の要素(:first-child)ではないです。
2番目の要素と指定するか、
css
1.accordion__panel:not(:nth-child(2)) { 2 display: none; 3}
同じタイプの最初の要素と指定するか、
css
1.accordion__panel:not(:first-of-type) { 2 display: none; 3}
IDが設定してあるのでそれを利用するか、
css
1.accordion__panel:not(#accordion1-panel) { 2 display: none; 3}
状況にあわせて選択してください。
投稿2023/04/12 08:59
総合スコア34347
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2023/04/12 10:55