July 1, 201115 yr Hi So I have figured out how to toggle an element using the css3 pseudo selector :target courtesy of this demo. <html> <head> <title></title> <style> #toggle div{ height:30px; border:1px solid black; display:block; } #toggle > ul{ display:none; border:1px solid red; } #toggle a{ position:absolute; } #toggle:target ul{ display:block; } .hide{ display:none; } #:target ul{ display:none; } #toggle:target .show{ display:none; } #:target .hide{ display:none; } #toggle:target .hide{ display:inline; } #:target .show{ display:inline; } </style> </head> <body> <div id="toggle"> <div> <a href="#toggle" class="show">toggle</a> <a href="#" class="hide">toggle</a> </div> <ul> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> </ul> </div> </body> </html> Whislt thats really handy for all modern browsers it doesnt work in IE7 and 8. I was wondering if anyone else has come up with a better solution? I'm sorely tempted to just run with this but thought I would check with everyone first. It is to be used as a fallback for non javascript users which on site is only 2% as it is. Any thoughts? Edited July 1, 201115 yr by ysuran
July 5, 201115 yr Cool effect but I'm staying away from CSS3 until its fully-implemented. Although it is fun to play around with
Create an account or sign in to comment