여러 개의 CSS 만 표시/숨기기 버튼 (java/jquery 없음)

Question

표시/숨기기 버튼을 사용하여 내용을 표시하거나 내용을 숨기는 농담 웹 사이트의 코드가 필요합니다.

숨겨진 상태로 시작한 다음 변경 버튼이 있습니다. 이 (CSS에 주로) 내가 뭐하는 거지 학교 프로젝트를위한 assesment

가 여러를 가질 수 있습니다 그대로

그러나, 어떤 자바 스크립트 또는 jQuery를 포함 할 수 없습니다? 나는 지금까지 오직 하나만 달성했다.

내 코드 지금까지 (내가이 웹 사이트 http://cssdeck.com/labs/css-only-showhide 떨어져 그것을 가지고) : 확인란이 선택되어 있는지 확인 당신은 input[type=checkbox]을 사용

<article> 
    <input type="checkbox" id="RMa" role="button"> 
    <label for="RMa" onclick=""><span>Show</span><span>Hide</span></label>  

    <section> 
     <p>Joke</p> 
    </section>  
    <section> 
     <p>Punchline</p> 
    </section> 

</article> 

(CSS)

article { 
position: relative; 
} 

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

article:after { clear: both  } 

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

input[type=checkbox] { 
width: 1px; 
overflow: hidden; 
position: absolute; 
} 

[for="read_more"] { 
position: absolute; 
left: 100px; 
width: ; 
text-align: center; 
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"] span:last-of-type { 
display: none; 
visibility: hidden; 
} 

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

input[type=checkbox]:checked ~ figure { 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; 
} 

Answer 1

(HTML) ID를 사용해야합니다. 예를 들어, 각 ID가 아닌 모든 ID를 확인할 수 있습니다. 예를 들면 다음과 같습니다.

#first[type="checkbox"] { 
    /* Code here */ 
} 

#second[type="checkbox"] { 
    /* Code here */ 
}