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.
Yes, it is, there are multiple ways to do this, it can be done using :focus, :active, :checked.
To toggle a div visibility in jQuery, use the toggle() method. It checks the div element for visibility i.e. the show() method if div is hidden. And hide() id the div element is visible. This eventually creates a toggle effect.
The toggle() method toggles between hide() and show() for the selected elements. This method checks the selected elements for visibility. show() is run if an element is hidden. hide() is run if an element is visible - This creates a toggle effect.
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;
.
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