KnowledgeHub
Questions
Tags
Users
Search
Alex Rivera
|
Logout
Edit Question
Title
Body
I've been searching for a good trick to make a Hide/Show content or a list with only CSS and no javascript. I've managed to make this action: <!DOCTYPE html> <head> <style> #cont {display: none; } .show:focus + .hide {display: inline; } .show:focus + .hide + #cont {display: block;} </style> </head> <body> <div> <a href="#show"class="show">[Show]</a> <a href="#hide"class="hide">/ [Hide]</a> <div id="cont">Content</div> </div> </body> </html> Demo here: http://jsfiddle.net/6W7XD/ And it's working but not as it should. Here is the problem: When the content is shown, you can hide it by clicking "anywhere on the page". How to disable that? how to hide content "only" by clicking hide? Thank you in advance!
Tags (comma-separated)
Save Edits
Cancel