labelタグをクリックした後labelタグ自身を隠したい

Question

前提・実現したいこと

レスポンシブの画面内に、「その他を見る」というボタンを表示させています。
labelタグ内の「その他を見る」というボタンをクリックすると、詳細が表示される仕様です。
詳細を表示されると「その他を見る」というボタンは表示される意味はないので、隠したいと思っています

該当のソースコード

<label class = "detail-btn" for="detail-btn">その他を見る</label>
				<input type="checkbox" id="detail-btn" />
			<div class="item item-detail">
				テキストテキストテキスト
			</div>
			<div class="item item-detail">
				テキストテキストテキスト
			</div>

　　　　　　　　.detail-btn, #detail-btn {
    　　　　display: none;
　　　　  }
@media screen and (max-width: 640px) {
    #detail-btn:checked ~ .item-detail {
      display: block;
    }
}

試したこと

ここに加えて、二通りのCSSを試しました。

/*----1つ目---*/
@media screen and (max-width: 640px) {
#detail-btn:checked ~ .detail-btn {
      width: 0;
      height: 0;
      position: absolute;
    }
}

/*----2つ目---*/
@media screen and (max-width: 640px) {
#detail-btn:checked ~ .detail-btn {
      display: none;
    }
}

両方反映されることなく、ボタンは表示されたままでした

補足情報

labelタグの特性を色々検索してみましたが、特に今回の事例と一致するような内容は見つけることができませんでした。

解決策があればご教授いただけると幸いです。
また、本サイトで質問をすることは初めてなので、情報が不足している点があるかもしれません。その際はご指摘をお願い致します。

ぜひ、よろしくお願い致します。

Answer 1

これでどうでしょう。

                <input type="checkbox" id="detail-btn" /><!-- こっちに置く -->
<label class = "detail-btn" for="detail-btn">その他を見る</label>
            <div class="item item-detail">
                テキストテキストテキスト
            </div>
            <div class="item item-detail">
                テキストテキストテキスト
            </div>

　　　　　　　　.detail-btn, #detail-btn {
    　　　　display: none;
　　　　  }
@media screen and (max-width: 640px) {
    #detail-btn:checked ~ .item-detail {
      display: block;
    }
    #detail-btn:checked + .detail-btn {
      display: none;
    } /* ADD */
}

Comments

[退会済みユーザー]

反映されました！
ありがとうございます！