CODEWITHSUNDEEP
htmlcss
Stylize
Stylize

Reputation: 1098

Using CSS to show/hide content. How do I make hide the default

I am trying to hide some content on a webpage until a user clicks on the [...]. So far Google has gotten me the following

<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; } }

It works, but I would like hidden to be the default, and I cannot seem to figure out how to accomplish that.

As always, any help is appreciated.

Upvotes: 1

Views: 58

Answers (1)

ketan
ketan

Reputation: 19341

Just change css like following will work for you.

First hide list. And on focus display.

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

Fiddle

Upvotes: 1

Related Questions