Question

Can I show or hide stuff using ony css, where the stuff that hides or shows depends on checking or unchecking a form box?

Or do I need javascript for that?

Thanks for your insight!!

Answer 1

Yes, by using the “adjacent sibling” selector (+) and the checked pseudoclass.

HTML

<label>Box 1: <input type="checkbox"><span>Box 1 is checked.</span></label>
<label>Box 2: <input type="checkbox"><span>Box 2 is checked.</span></label>
<label>Box 3: <input type="checkbox"><span>Box 3 is checked.</span></label>

CSS

​label {display:block;}
input[type="checkbox"] + * {display:none; margin-left:1em;}
input[type="checkbox"]:checked + * {display:inline;}

​Demo here: http://jsfiddle.net/LSF3C/