純粋なCSS（jQueryなし）、1つのdivを非表示にし、別のものを表示しますか？

Question

私はこのようなことをしたいと思いますが、コンテンツ1を表示すると、折りたたみ2は折りたたみ1のままにしておきます。コードを違う方法で整理しようとしましたが、ちょうど狂ってしまいました。 ：D

.collapse{ 
 
    cursor: pointer; 
 
    display: block; 
 
    background: #cdf; 
 
} 
 

 
.collapse + input{ 
 
    display: none; /* hide the checkboxes */ 
 
} 
 

 
.collapse + input + div{ 
 
    display:none; 
 
} 
 

 
.collapse + input:checked + div{ 
 
    display:block; 
 
}

<label class="collapse" for="_1">Collapse 1</label> 
 
<input id="_1" type="radio" name="c1"> 
 
<div>Content 1</div> 
 

 
<label class="collapse" for="_2">Collapse 2</label> 
 
<input id="_2" type="radio" name="c1"> 
 
<div>Content 2</div>

Answer 1

は少しトリッキーが、その仕事！

section { 
 
    position: relative; 
 
} 
 

 
section > .content { 
 
    position: absolute; 
 
    top:100%; 
 
    left: 0; 
 
} 
 

 
.collapse{ 
 
    cursor: pointer; 
 
    display: block; 
 
    background: #cdf; 
 
} 
 
.collapse + input{ 
 
    display: none; /* hide the checkboxes */ 
 
} 
 
.collapse + input + div{ 
 
    display:none; 
 
} 
 
.collapse + input:checked + div{ 
 
    display:block; 
 
}

<section> 
 
    <label class="collapse" for="_1">Collapse 1</label> 
 
    <input id="_1" type="radio" name="c1"> 
 
    <div class="content">Content 1</div> 
 

 
    <label class="collapse" for="_2">Collapse 2</label> 
 
    <input id="_2" type="radio" name="c1"> 
 
    <div class="content">Content 2</div> 
 
</section>

Fiddle demo

Answer 2

あなたのコード実際に素晴らしい作品。ラベルの後にコンテンツを表示するということは、単にHTMLオーダを変更する必要があるということです。つまり、プラス（隣接する兄弟セレクタ）は使用できません。代わりに一般的な兄弟セレクタ（〜）を使用してください。ここで詳しく読むことができますhttp://www.w3schools.com/css/css_combinators.asp

チルダを使用するコードの例を示します。コンテンツdivはクラスのような一意の識別子を必要とすることに注意してください。

.collapse{ 
 
cursor: pointer; 
 
display: block; 
 
    background: #cdf; 
 
} 
 
input{ 
 
    display: none; /* hide the checkboxes */ 
 
} 
 
input ~ .content{ 
 
    display:none; 
 
} 
 
input#_1:checked ~ .content1, input#_2:checked ~ .content2{ 
 
    display:block; 
 
}

<label class="collapse" for="_1">Collapse 1</label> 
 
<input id="_1" type="radio" name="c1"> 
 

 
<label class="collapse" for="_2">Collapse 2</label> 
 
<input id="_2" type="radio" name="c1"> 
 

 
<div class="content content1">Content 1</div> 
 
<div class="content content2">Content 2</div>