内容
アコーディオンメニューを作成していて、一番上のメニューのみ開いた状態で表示させたいのですが、うまくいきません。
html
1 <div class="qa"> 2 3 <div class="cp_actab"> 4 <input id="tab-one" type="checkbox" name="tabs"> 5 <label for="tab-one">Q 開いた状態にしたいメニュー</label> 6 <div class="cp_actab-content"> 7 <p class="answer_text">A 開いた状態にしたいメニュー</p> 8 </div> 9 </div> 10 <div class="cp_actab"> 11 <input id="tab-two" type="checkbox" name="tabs"> 12 <label for="tab-two">Q 閉じた状態でいいメニュー</label> 13 <div class="cp_actab-content"> 14 <p class="answer_text">A 閉じた状態でいいメニュー</p> 15 </div></div> 16 17 </div> 18
css
1 2 3.cp_actab { 4 position: relative; 5 overflow: hidden; 6 width: 95%; 7 margin: 0 auto; 8 color: #ffffff; 9 } 10 11 .cp_actab input { 12 position: absolute; 13 z-index: -1; 14 opacity: 0; 15 } 16 17 .cp_actab label { 18 font-weight: bold; 19 line-height: 2.3rem; 20 position: relative; 21 display: block; 22 padding: 0 0 0 0.3rem; 23 cursor: pointer; 24 margin: 0 0 0.2rem 0; 25 background: #6a4c48; 26 font-size: 1.1rem; 27 } 28 29 .cp_actab .cp_actab-content { 30 overflow: hidden; 31 max-height: 0; 32 -webkit-transition: max-height 0.35s; 33 transition: max-height 0.35s; 34 color: #121d9b; 35 background: none; 36 } 37 38 .answer_text { 39 font-size: 2.1rem; 40 font-weight: bold; 41 margin: 0.1rem; 42 } 43 44 .answer_text p { 45 font-size: 2.1rem; 46 } 47 48 .cp_actab .cp_actab-content p { 49 margin: 0.6rem; 50 font-size: 1rem; 51 line-height: normal; 52 color: #2a2128; 53 } 54 55 /* :checked */ 56 .cp_actab input:checked~.cp_actab-content { 57 max-height: 30rem; 58 } 59 60 /* Icon */ 61 .cp_actab label::after { 62 line-height: 2; 63 position: absolute; 64 top: 0; 65 right: 0; 66 display: block; 67 width: 2em; 68 height: 2em; 69 -webkit-transition: all 0.35s; 70 transition: all 0.35s; 71 text-align: center; 72 } 73 74 .cp_actab input[type=checkbox]+label::after { 75 content: '+'; 76 } 77 78 .cp_actab input[type=checkbox]:checked+label::after { 79 transform: rotate(315deg); 80 } 81
## 試したこと
他サイトで掲載されてる方法をほぼ全て調べてやってみましたが、全くうまくいかずでした。
かなり初心者な質問で大変恐縮ですがよろしくお願いいたします。
備考
共有しましたソースに追加、もしくは修正などでご教示いただけますと幸いでございます。
他、追加で必要な情報などすぐ提供いたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/03/23 09:15