多個CSS只顯示/隱藏按鈕（沒有Java/jQuery）

Question

我需要一個笑話網站的代碼，我試圖做，它使用顯示/隱藏按鈕來顯示內容/隱藏內容。

它開始隱藏，然後有一個按鈕來改變它。

但是，它不能包含任何JavaScript或jQuery的，因爲這是學校項目的assesment我這樣做（這是對CSS爲主）

是有可能有多個？到目前爲止，我只取得了一個。

到目前爲止我的代碼（我得到它關閉這個網站http://cssdeck.com/labs/css-only-showhide的）：

<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

你以前input[type=checkbox]因爲如果選中該複選框看到 （HTML）你應該使用一個ID，這樣你可以檢查每一個，而不是所有的，例如：

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

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