html,cssでdl,dt,ddタグ内での inputのchecked機能の有効化

前提・実現したいこと

html,cssでwebサイトのQ&A部分を作成中。
下記の２つの条件を満たしながらQ&Aを作成したいです。

①dl,dt,ddタグを使用
②input,labelタグを用いて、「質問部分をclick」→「回答部分を表示」

発生している問題

②のみは実現できるのですが、①のdl,dt,ddタグと組み合わせると実現できません。
延々とググっては試行錯誤したのですが、とうとう実現できそうにないので、どなた様かお知恵を拝借いただけませんでしょうか。
よろしくお願いします。

該当のソースコード

html
<dl class="faq">
   <dt>
     <input type="checkbox" class="faq-label" id="faq-labelID">
     <label for="faq-labelID" class="test1">この部分をclickして</label>
     <p　class="test2">これはどう？その1</p>　<!--- 試したことの③ --- >
   </dt>
   <p　class="test3">これはどう？その2</p>　　<!--- 試したことの③ --- >
   <dd>
     <div class="faq-answ">
       <p>これを表示したいです。</p>
     </div>
   </dd>
 </dl>

css
.faq {
  & label {
    display: block;
    margin: 1.5px 0;
    padding: 11px 12px;
    cursor: pointer;
    transition: all 0.5s;
  }
  & input {
    display: none; /*チェックボックス非表示*/
  }
}

.faq-answ {
  height: 0;
  padding: 0;
  margin-left: 20px;
  overflow: hidden;
  opacity: 0;
  transition: 0.8s;
}

/*--- clickで変化 ---*/
.faq-label:checked + .faq-answ {　/*--- これを実現したい ---*/
  display: inline-block;
  height: auto;
  opacity: 1;
}

.faq-label:checked + .test1 {. /*--- 試したことの③ ---*/
  color: tomato;
  font-size: 1.6rem;
}

.faq-label:checked + .test2 {　　/*--- 試したことの③ ---*/
  color: tomato;
  font-size: 1.6rem;
}

.faq-label:checked + .test3 {　　/*--- 試したことの③ ---*/
  color: tomato;
  font-size: 1.6rem;
}

試したこと

①擬似要素はinline要素になるとの情報から、当該箇所にinline-blockを追加
②スタイルの優先順位が問題かもしれないと思い、タグ指定→クラス名指定に変更
③要素の親子関係が問題でcheckが反映されないのかと思い、下記を試してみました。
・label要素<label class="test1">にcssを当てる→○
・label要素に兄弟要素<p class="test2">を作ってcssを当てる→×
・dtに兄弟要素<p class="test3">を作ってcssを当てても×

行動規範の内容に同意します

回答3件

ベストアンサー

解決済みですが、
inputは非表示にするので、どこに配置してもいいと思いますので、dlの前に配置すれば、一般兄弟結合子 ~ で可能です。
HTML変更不可ならJSしかないと思いますが。

html
1<input type="checkbox" class="faq-label" id="faq-labelID">
2<dl class="faq">
3  <dt>
4    <label for="faq-labelID" class="test1">この部分をclickして</label>
5  </dt>
6  <dd>
7    <div class="faq-answ">
8      <p>これを表示したいです。</p>
9    </div>
10  </dd>
11</dl>

scss
1#faq-labelID {
2  display: none; 
3}
4.faq {
5  & label {
6    display: block;
7    margin: 1.5px 0;
8    padding: 11px 12px;
9    cursor: pointer;
10    transition: all 0.5s;
11  }
12}
13
14.faq-answ {
15  height: 0;
16  padding: 0;
17  margin-left: 20px;
18  overflow: hidden;
19  opacity: 0;
20  transition: 0.8s;
21}
22
23/*--- clickで変化 ---*/
24#faq-labelID:checked ~ dl .faq-answ {
25  height: auto;
26  opacity: 1;
27}