使用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