tags:

views:

76

answers:

2
+2  Q: 

Is it possible to create a CSS-only accordion?

I'm thinking about using an accordion in a "please enable Javascript" page, but I don't know if it's possible with CSS only.

I'm almost sure it is for most browsers, but I'm also fearing I'll face some limitation of IE and I'd like to know if any of you tried this already (or not) and could tell me if it's either possible or impossible (considering IE6+).

A: 

It is impossible without JavaScript. Even if you use the new HTML5 transitions (which are certainly not supported in IE6), you still need JavaScript to trigger the transition.

Maz  2010-07-03 14:30:19
You're wrong, CSS transitions (supported in latest webkit, beta gecko and AFAIK stable presto) can be used solely with CSS. And I recommend you to use them, take a look: http://u.nu/7avrc
Camilo Martin  2010-07-03 14:42:37
+3  A: 

Some CSS only Accordin here

http://www.webdeveloperjuice.com/2010/05/17/8-powerful-pure-css-accordions-to-make-web-application-lite-and-impressive/

And it is IE 6 compatible

http://www.cssnewbie.com/advanced-css-accordion-effect/

http://www.cssnewbie.com/example/css-only-accordion/vertical.html

metal-gear-solid  2010-07-03 14:41:36
+1 since it's almost what I need but, quoting the site, "will function in IE6 with JavaScript". So it won't work if my intention is to ask IE6 users to enable JS too, but actually I don't think IE6 users even know how to disable it.
Camilo Martin  2010-07-03 14:52:41
it works even if js disabled http://www.cssnewbie.com/example/css-only-accordion/vertical.html
metal-gear-solid  2010-07-03 14:54:15
And BTW it's ok if Accordion work if JS enabled and if JS disabled then According will be open by default. as in this link http://www.brown.edu/ . main thing is content should accessible in both condition.
metal-gear-solid  2010-07-03 14:58:30
Yes, you're right. That's enough for IE6 and it works as wanted in others. Good finding! :)
Camilo Martin  2010-07-03 15:00:04
!!trojan alert (first link)
Knu  2010-07-25 12:04:25

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?