i have this simple code:
It shows the expanded version and 'hide' link as default. I can't seem to get it to reverse this - show collapsed version with 'show' link as default.Code:<html> <head> <title>menu mockup</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> </body> </html>
Anyone??
Thanks and Blessings