Toggle divs without using Javascript

css, javascript

Solution

Here you go, skipper! (edit — updated for science)

HTML:

<label for=cb>Click Here</label>
<input type='checkbox' style='display: none' id=cb>
<div>
    Hello. This is some stuff.
</div>

CSS:

input:checked + div { display: none; }

edit — an additional note: `display: none` will cause certain browsers (IE) to pay no attention to the `<input>` checkbox. Instead of hiding it with the `display` CSS attribute, you can "move" it offscreen with something like `position: absolute; left: -10000px;`.

Problem

I'd like to toggle a `<div>`, but my requirement is that it must work with `javascript` turned off. I would like to select a hyperlink that states "modify search" and the div that contains the search criteria displays. I've found a TON of demos using `jQuery`, but they all require `javascript` enabled. Any assistance is appreciated.

Original source