CSS3 자식 선택기를 사용하여 필터 버튼 숨기기/보이기?

Question

CSS3 자식 선택자를 사용하여 콘텐츠를 숨기고 표시하는 버튼을 만들려고 시도하지만 트릭은 최소한의 마크 업으로 만 작동합니다.

곧 섹션 내에 여러 div를 추가합니다 (콘텐츠가있는 곳). 하위 선택기는 더 이상 숨김/표시 버튼을 사용하지 않도록 콘텐츠를 숨기지 않습니다.

무슨 일이 일어나고 있는지에 대한 도움이나 더 나은 이해는 크게 감사하겠습니다. 도와 주셔서 감사합니다.

여기에 문제가있는 마크 업입니다 :

CSS :

.please > section:first-of-type { 
    float: right; 
    width: 62.5%; 
} 

.please > section:last-of-type { 
    display: none; 
    visibility: hidden; 
} 

.please { 
    -webkit-transition: .125s linear; 
    -moz-transition: .125s linear; 
    -ms-transition: .125s linear; 
    -o-transition: .125s linear; 
    transition: .125s linear; 
} 

#read_more[type=checkbox] { 
    border: 0; 
    clip: rect(0 0 0 0); 
    height: 1px; 
    width: 1px; 
    margin: -1px; 
    overflow: hidden; 
    padding: 0; 
    position: absolute; 
} 

[for="read_more"] { 
    position: absolute; 

    left: 0; 
    width: 100px; 
    text-align: center; 
    padding: .25rem; 
    box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1), inset -1px -1px rgba(0, 0, 0, 0.1); 
} 

[for="read_more"]:hover { 
    background: rgba(0,0,0,.5); 
    color: rgb(255,255,255); 
} 

[for="read_more"] .spanz:last-of-type { 
    display: none; 
    visibility: hidden; 
} 

#read_more[type=checkbox]:checked ~ #nomore { 
    display: block; 
    visibility: visible; 
    width: 100%; 
} 

#read_more[type=checkbox]:checked ~ [for="read_more"] .spanz:first-of-type { 
    display: none; 
    visibility: hidden; 
} 

#read_more[type=checkbox]:checked ~ [for="read_more"] .spanz:last-of-type { 
    display: block; 
    visibility: visible; 
} 

HTML : 여기

<div class="please"> 

<div id="filter container"> 

<input type="checkbox" id="read_more" role="button"> 
<label for="read_more" onclick=""><span class="spanz">Show Filter</span><span class="spanz">Hide Filter</span></label>  
    <br /><br /> 

</div> 

<section id="nomore"> 
<div> 
<ul> 
<li>Owls hunt mostly small mammals</li> 
<li>Owls hunt mostly small mammals</li> 
<li>Owls hunt mostly small mammals</li> 
</ul> 
</div> 

<div> 
<ul> 
<li>Owls hunt mostly small mammals</li> 
<li>Owls hunt mostly small mammals</li> 
<li>Owls hunt mostly small mammals</li> 
</ul> 
</div> 


<div> 
<ul> 
<li>Owls hunt mostly small mammals</li> 
<li>Owls hunt mostly small mammals</li> 
<li>Owls hunt mostly small mammals</li> 
</ul> 
</div> 

</section> 

</div> 

그리고이 작동하지만 내가 필요 확실히하지 않은 간단한 마크 업입니다.

CSS :

.please > section:first-of-type { 
    float: right; 
    width: 62.5%; 
} 

.please > section:last-of-type { 
    display: none; 
    visibility: hidden; 
} 

.please { 
    -webkit-transition: .125s linear; 
    -moz-transition: .125s linear; 
    -ms-transition: .125s linear; 
    -o-transition: .125s linear; 
    transition: .125s linear; 
} 

#read_more[type=checkbox] { 
    border: 0; 
    clip: rect(0 0 0 0); 
    height: 1px; 
    width: 1px; 
    margin: -1px; 
    overflow: hidden; 
    padding: 0; 
    position: absolute; 
} 

[for="read_more"] { 
    position: absolute; 

    left: 0; 
    width: 100px; 
    text-align: center; 
    padding: .25rem; 
    box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1), inset -1px -1px rgba(0, 0, 0, 0.1); 
} 

[for="read_more"]:hover { 
    background: rgba(0,0,0,.5); 
    color: rgb(255,255,255); 
} 

[for="read_more"] .spanz:last-of-type { 
    display: none; 
    visibility: hidden; 
} 

#read_more[type=checkbox]:checked ~ #nomore { 
    display: block; 
    visibility: visible; 
    width: 100%; 
} 

#read_more[type=checkbox]:checked ~ [for="read_more"] .spanz:first-of-type { 
    display: none; 
    visibility: hidden; 
} 

#read_more[type=checkbox]:checked ~ [for="read_more"] .spanz:last-of-type { 
    display: block; 
    visibility: visible; 
} 

HTML :

<div class="please"> 


<input type="checkbox" id="read_more" role="button"> 
<label for="read_more" onclick=""><span class="spanz">Show Filter</span><span class="spanz">Hide Filter</span></label>  
    <br /><br /> 

<section id="nomore"> 
    <ul> 
    <li>Owls hunt mostly small mammals</li> 
    <li>Owls hunt mostly small mammals</li> 
     <li>Owls hunt mostly small mammals</li> 
    </ul> 

</section> 

</div>  

Answer 1

당신이/쇼 부품을 숨길 할 수 있도록 각 섹션에 대한 몇 가지 입력 및 레이블을 작성해야합니다.

나는이 목표에 대한 샘플 코드를 작성, 당신은

<div> 
<article> 
    <input type="checkbox" id="read_more_1" role="button"> 
    <label for="read_more_1" class ="button" onclick=""><span>Read More</span><span>Hide This Shit!</span></label>   
    <section> 
     <p>trim content</p> 
    </section>  
    <section> 
     <p>full content</p> 
    </section> 
</article> 

<article> 
    <input type="checkbox" id="read_more_2" role="button"> 
    <label for="read_more_2" class ="button" onclick=""><span>Read More</span><span>Hide This Shit!</span></label>   
    <section> 
     <p>trim content</p> 
    </section>  
    <section> 
     <p>full content</p> 
    </section> 
</article> 

<article> 
    <input type="checkbox" id="read_more_3" role="button"> 
    <label for="read_more_3" class ="button" onclick=""><span>Read More</span><span>Hide This Shit!</span></label>   
    <section> 
     <p>trim content</p> 
    </section>  
    <section> 
     <p>full content</p> 
    </section> 
</article> 
</div>   

과 CSS를 볼 수 있습니다

article { 
    margin-bottom: 3rem; 
    position: relative; 
    *zoom: 1; 
} 

article:before, article:after { 
    content: ""; 
    display: table; 
} 

article:after { clear: both } 

article section:first-of-type { 
} 

article section:last-of-type { 
    display: none; 
    visibility: hidden; 
} 


input[type=checkbox] { 
    border: 0; 
    clip: rect(0 0 0 0); 
    height: 1px; 
    width: 1px; 
    margin: -1px; 
    overflow: hidden; 
    padding: 0; 
    position: absolute; 
} 

[for^="read_more"] { 
    position: absolute; 
    bottom: -3rem; 
} 

[for^="read_more"] span:last-of-type { 
    display: none; 
    visibility: hidden; 
} 

input[type=checkbox]:checked ~ section:first-of-type { 
    display: none; 
    visibility: hidden; 
    width: 100%; 
} 

input[type=checkbox]:checked ~ section:last-of-type { 
    display: block; 
    visibility: visible; 
    width: 100%; 
} 

input[type=checkbox]:checked ~ [for^="read_more"] span:first-of-type { 
    display: none; 
    visibility: hidden; 
} 

input[type=checkbox]:checked ~ [for^="read_more"] span:last-of-type { 
    display: block; 
    visibility: visible; 
} 

당신이 (http://jsfiddle.net/shahabal/zrzjd3t1/) 링크에서 실행할 수