Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts

    Question show / hide content without JavaScript

    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?

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by jarv View Post
    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:
    Code:
    <!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>
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    jarv (08-10-2012)

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,700
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    Quote Originally Posted by Arbitrator View Post
    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 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.

  • The Following 2 Users Say Thank You to VIPStephan For This Useful Post:

    Arbitrator (08-10-2012), jarv (08-10-2012)

  • #4
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts
    thanks

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by VIPStephan View Post
    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 which, in turn, pointed to an email that discussed various problems in implementing the element. I found it interesting.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #6
    Regular Coder
    Join Date
    Jun 2002
    Location
    Flint, Michigan, USA
    Posts
    627
    Thanks
    1
    Thanked 20 Times in 20 Posts
    Quote Originally Posted by jarv View Post
    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.
    Last edited by jalarie; 08-22-2012 at 09:29 PM. Reason: spelling.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •