...

View Full Version : show / hide content without JavaScript



jarv
08-10-2012, 11:12 AM
Hi,

is there a way of having a link that when clicked it shows content and when you click it again it hides the content - with using just HTML and CSS?

Arbitrator
08-10-2012, 11:42 AM
is there a way of having a link that when clicked it shows content and when you click it again it hides the content - with using just HTML and CSS?In theory, yes. There's a new HTML5 element that can do that called details. However, it seems to only be implemented in Google Chrome at the moment. (I tested Google Chrome 22, Mozilla Firefox 17, Opera 12.5, and Windows Internet Explorer 9.)

This code was used for testing:

<!doctype html>
<html lang="en-US">
<head>
<title>Demo</title>
<style>
details, summary { display: block; }
</style>
</head>
<body>
<details>
<summary>Spoiler (Click Me)</summary>
<div>
<p><var>This is the plot to a film.</var></p>
</div>
</details>
</body>
</html>

VIPStephan
08-10-2012, 12:02 PM
In theory, yes. There's a new HTML5 element that can do that called details.

OK, that one was new for me, too, but as always, HTML5doctor (http://html5doctor.com/the-details-and-summary-elements/) has some pretty good information about it. And when I read this, I once more come to the conclusion that you shouldnít use it just yet, because the specification for implementation is far from final yet. There are no accessibility measures and even the behavior on user interaction is only defined in a very basic way.

Conclusion: Donít jump on it yet just because itís new and promises many things. Wait until implementation is decent.

jarv
08-10-2012, 12:14 PM
thanks

Arbitrator
08-10-2012, 02:06 PM
Conclusion: Donít jump on it yet just because itís new and promises many things. Wait until implementation is decent.Yes, I agree. But it's the only answer short of "no."

Your HTML5 Doctor resource turned out to be useful. I wasn't aware of the label element issue. Plus it pointed to an Opera article (http://my.opera.com/ODIN/blog/implementing-html5-details) which, in turn, pointed to an email (http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2011-April/031132.html) that discussed various problems in implementing the element. I found it interesting.

jalarie
08-22-2012, 09:28 PM
Hi, is there a way of having a link that when clicked it shows content and when you click it again it hides the content - with using just HTML and CSS?

"Click" is a script thing; you need "hover" to make it pure CSS. Check out the menu at http://spruce.flint.umich.edu/~jalarie/jaa_b5.htm. It does NOT work in IE.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum