Cracker World : CSS3 coding for hide and Show

This is hide and show in css.simple css coding for hide and show content if hide click to hide the content and show click to show the content it's toggle concepts

CSS:

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

html

Demo:

Here's a list

[show]

item 1
item 2
item 3

How about that?

Source Code:

<!DOCTYPE html>
<head>
<title>CSS3 coding for hide and Show</title>
<style type="text/css">
.show {display: none; }
.hide:focus + .show {display: inline; }
.hide:focus { display: none; }
.hide:focus ~ #list { display:none; }
@media print { .hide, .show { display: none; } }

</style>
</head>
<body>
<p>Here's a list</p>
<div>
<a href="#" class="hide">[hide]</a>
<a href="#" class="show">[show]</a>
<ol id="list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
</div>
<p>How about that?</p>
</body>
</html>

Pages

CSS3 coding for hide and Show

CSS:

html

No comments:

Post a Comment