ラベルをクリックしたらメニューリストを表示、非表示にしたい

Question

ラベルをクリックしたらメニューを表示、非表示にしたいです。現在記述のコードではクリックしても表示されません。どのように修正すれば表示、非表示にできるでしょうか？ご教授頂ければ幸いです。

<div class="submain2">
 			<h2><img class="maru" src="mark1.png">更新情報・お知らせ
            <label for="label2"><i class="fas fa-dice-three"></i></label>
            <input type="checkbox" id="label2" />
 			</h2>

<!-- ここから非表示 -->
 		 <dl class="info">
 		 	<dt>2017/02/27</dt>
 		 	<dd>html,cssを中心に更新。旧ファイルが必要な場合はお問い合わせ下さい。
 		 	<span class="navcon">NEW</span></dd>

 		 	<dt>2016/02/19</dt>
 		 	<dd>biz35公開。</dd>

 		 	<dt>20XX/00/00</dt>
 		 	<dd>ホームページリニューアル</dd>

 		 	<dt>20XX/00/00</dt>
 		 	<dd>ホームページリニューアル</dd>	

 		 	<dt>20XX/00/00</dt>
 		 	<dd>ホームページリニューアル</dd>	

 		 	<dt>20XX/00/00</dt>
 		 	<dd>ホームページリニューアル</dd>	

 		 	<dt>20XX/00/00</dt>
 		 	<dd>ホームページリニューアル</dd>	

 		 	<dt>20XX/00/00</dt>
 		 	<dd>ホームページリニューアル</dd>		
 		 </dl>
        </div>
<!--ここまで  -->

.submain2 input{
     display: none;

    }

/*中身を非表示*/
    .info {
     height: 0;
     padding: 0;
     overflow: hidden;
     opacity: 0;
     transition: 0.8s;
    }

/*クリックして表示*/
　　#label2:checked + .info {
     height: auto;
     opacity: 1;
    }

Answer 1

下記のようにチェックボックスを h2 の後に移動させてください。

<div class="submain2">
            <h2><img class="maru" src="mark1.png">更新情報・お知らせ
              <label for="label2"><i class="fas fa-dice-three"></i></label>
            </h2>
            <input type="checkbox" id="label2" />

<!-- ここから非表示 -->
          <dl class="info">

<!-- 以下略 -->

#label2:checked + .infoの + は隣接兄弟結合子なので、#label2 と .info は隣接した兄弟でないとダメです。

隣接兄弟結合子 - CSS: カスケーディングスタイルシート | MDN

Comments

[dehi0923]

回答ありがとうございます。ご指摘の通り、チェックボックスをｈ２の後に記述しましたがクリックしても表示されません。どのように対処すればいいでしょうか？

[hatena19]

下記のサンプルで動作することを確認済みです。

https://codepen.io/hatena19/pen/oNzrERW

上記のサンプルと見比べて修正してください。
それでうまくいかないなら、うまくいかないHTML CSS を回答に追記してください。

[dehi0923]

頂きましたサンプルに合わせて記述しているのですがやはり動作しません。
HTML
<div class="submain2">
<h2><img class="maru" src="mark1.png">更新情報・お知らせ
<label for="label2"><i class="fas fa-dice-three"></i></label>
</h2>
<input type="checkbox" id="label2"/>

CSS
#label2:checked + .info {
height: auto;
opacity: 1;
}
どこか原因があるのでしょうか？

[hatena19]

サンプルでは動作してますか。
３のサイコロのアイコンをクリックすると表示されると思いますが。

サンプルとは違う部分があるか、提示されていない部分が影響しているかでしょうね。

[dehi0923]

サンプルでは動作しています。コードもサンプルと同じなので、他の部分かもしれないです。レスポンシブで画像を縮小してブレークポイントで、中身を非表示にするコードは動作しているようで（transition等は正常に動作している）、クリックして表示のコードが動作しないようです。もう少し頑張ってみます。