Toggle divs without using Javascript

Question

I\'d like to toggle a

, but my requirement is that it must work with javascript turned off. I would like to select a hyperlink that sta

相关标签:

Answer 1

Here is the simple example follow this and you will be able to create toggle using css without any JAVASCRIPT and JQUERY. You can also add animations using css without JQUERY. CSS3 is AWESOME! :)

.box{width:200px;
height:0;
background:red;
transition:all 0.4s linear;}
input:checked ~ .box{height:220px;}

<input id="toggle" type="checkbox" style="visibility:hidden">
<label for="toggle"> CLICK ME </label>
<div class="box"> </div>

Answer 2

You can't do it without using either Javascript or sending another request.

If you can live with the extra request (that is, an added page load is OK), then the most straightforward solution is to point the link to the current URL, but add a query string parameter, e.g. http://example.com/current-page?showsearch=1. Then, on the server, check if the showsearch parameter is set, and if so, initialize the search div to be visible.

Of course you will have to take care that the rest of your page state survives the request; you may have to use a form to be able to carry over any data the user may have entered, and this most likely means your link can't be a link, but has to be a button (because links cannot trigger form submits without Javascript).

Answer 3

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

Answer 4

What you ask is impossible without JavaScript. (Or, as @Pointy has pointed out, CSS3 selectors.)

You will have to modify your requirements, or better yet, just display the form by default and hide for JavaScript users (if necessary). Your page can work for everyone, and have unimportant features disabled for those that cannot use them.

Answer 5

The way to make this work with JS disabled is have the hyperlink have some href that accomplishes the task you desire - like:

/the/original/url?advanced-search=true

where the web server delivers different content when ?advanced-search=true is there. if JS is enabled, the jquery code you've researched should just cancel the original action.

Answer 6

The <details> element does what you ask without any CSS or JavaScript applied.

It is of course not a div, so it doesn't answer your question literally, but I read your requirement being having some content you wish to conditionally reveal or conceal.

The <details> creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label can be provided using the <summary> element.

Unfortunately browser support for <details> is less than perfect, IE and Edge currently having no support at all. Edge status is Under Consideration. Development of IE is stopped so it will never gain support.