使用CSS顯示/隱藏內容。我如何隱藏默認的

Question

我試圖隱藏網頁上的一些內容，直到用戶點擊[...]。到目前爲止，谷歌已經得到了我下面的

<p>some text I want to show</p> 
<a href="#" class="hide">[...]</a> 
<a href="#" class="show">[...]</a> 
<div id ="list"> 
<p>content I want to hide</p> 
</div> 

CSS

.show {display: none; } 
.hide:focus + .show {display: inline; } 
.hide:focus { display: none; } 
.hide:focus ~ #list { display:none; } 
@media print { .hide, .show { display: none; } } 

它的工作原理，但我想隱藏的是默認的，我似乎無法弄清楚如何實現這一目標。

一如既往，任何幫助表示讚賞。

Answer 1

只要改變像以下的CSS將爲你工作。

第一個隱藏列表。並在焦點顯示。

.show {display: none; } 
#list { display:none; } 
.hide:focus + .show {display: inline; } 
.hide:focus { display: none; } 
.hide:focus ~ #list { display:block; } 

Fiddle