Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Toggle divs without using Javascript

Tags:

javascript

css

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.

like image 544
Sydney Smith Avatar asked Jun 13 '12 21:06

Sydney Smith


People also ask

Can you use onclick without Javascript?

Yes, it is, there are multiple ways to do this, it can be done using :focus, :active, :checked.

How do you make a Div Toggleable?

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.

How do I toggle a button in jQuery?

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.


1 Answers

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;.

like image 89
Pointy Avatar answered Oct 01 '22 06:10

Pointy