チェックボックスのハックが正しく表示されないコンテンツが隠されています

Question

私は、ページ上のコンテンツを短くするために「詳細を表示」ツールを開発していて、奇妙な問題に遭遇しました。

このコードでは、CSSのチェックボックス「ハック」を使用して、コンテンツの表示と非表示を切り替えます。以下のコードは実際の動作を示しています。

.read-more { 
 
    opacity: 0; 
 
    max-height: 0; 
 
    font-size: 0; 
 
} 
 
.thechecker { 
 
    display: none; 
 
} 
 
.trigger { 
 
    cursor: pointer; 
 
    display: inline-block; 
 
} 
 
.thechecker ~ .trigger:before { 
 
    content: 'Show more'; 
 
} 
 
.thechecker:checked ~ .trigger:before { 
 
    content: 'Show less'; 
 
} 
 
.thechecker:checked ~ .read-more-wrap .read-more { 
 
    opacity: 1; 
 
    font-size: inherit; 
 
    max-height: 999em; 
 
}

<div class="col-sm-4"> 
 
    <input type="checkbox" class="thechecker" id="post-1" /> 
 
    <div class="read-more-wrap"> 
 
    <h3>I broke something.</h3> 
 

 
    <p>This is not hidden.</p> 
 
    <div class="read-more"> 
 
     <p>This is hidden.</p> 
 
     <!-- THIS IMAGE IS CAUSING THE PROBLEM 
 
     HOW DO I MAKE THIS WORK TO DISPLAY THE IMAGE ALONE? --> 
 
     <img src="https://www.placecage.com/g/200/300" /> 
 
    </div> 
 
    </div> 
 
    <label for="post-1" class="trigger"></label> 
 
</div>

このコードに挿入全くイメージがありません場合は、段落は問題なく完全に表示されます。ただし、イメージを含めると、コンテンツの長さにかかわらず、「詳細を表示」のテキストは効果的に無効になります。クリックしてドラッグすると、イメージがドラッグされます。

ラベルをクリックしたときに画像を表示できるようにするにはどうすればよいですか？

Answer 1

これはあなたのためにそれを修正する必要があります：あなたはちょうどあなたのCSSで画像を含めるために必要なhttps://jsfiddle.net/5f3pbg8b/1/

。

.thechecker:checked ~ .read-more-wrap .read-more, img { 
    opacity: 1; 
    font-size: inherit; 
    max-height: 999em; 
}