Menu
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!
905
You can hide an element in CSS using the CSS properties display: none or visibility: hidden. display: none removes the entire element from the page and mat affect the layout of the page. visibility: hidden hides the element while keeping the space the same.
Style display property is used to hide and show the content of HTML DOM by accessing the DOM element using JavaScript/jQuery. To hide an element, set the style display property to “none”. document. getElementById("element").
I wouldn't use checkboxes, i'd use the code you already have
DEMO http://jsfiddle.net/6W7XD/1/
CSS
body { display: block; } .span3:focus ~ .alert { display: none; } .span2:focus ~ .alert { display: block; } .alert{display:none;} HTML
<span class="span3">Hide Me</span> <span class="span2">Show Me</span> <p class="alert" >Some alarming information here</p> This way the text is only hidden on click of the hide element
185
This is going to blow your mind: Hidden radio buttons.
input#show, input#hide { display:none; } span#content { display:none; } input#show:checked ~ span#content { display:block; } input#hide:checked ~ span#content { display:none; }<label for="show"> <span>[Show]</span> </label> <input type=radio id="show" name="group"> <label for="hide"> <span>[Hide]</span> </label> <input type=radio id="hide" name="group"> <span id="content">Content</span>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
