codesouk

CSS3 coding for hide and Show

This is show and hide in css3.

it consists of hide and show property .

this line used for hide the content .

[show]this line used for show the content.

css3 using to focus to the content coding to hide and display content very easily.

Demo:

Here's a list

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>

codesouk

Tuesday, July 30, 2013

CSS3 coding for hide and Show

No comments:

Post a Comment