Click header and expand text without using JavaScript / jQuery

Question

As pointed out in the title, my question is very simple: is there any way that I can achieve clicking on a header (title) and expand (and collapse) a text associated with it, without using JavaScript nor jQuery? Is there any browser compatible way of doing this (IE 6+ proof)?

I've made a very simple HTML+CSS site for a conference, and I would like to use JS only if necessary. So, I'm just asking if I can do it sticking only to HMTL/CSS, in a compatible way, of course.

The few solutions I've found are old or incompatible with some browser versions.

Thank you very much, João

Answer 1

IE6-proof pure CSS solution?

NO

[Leave the dead rest in their graves, don't try to make them run a marathon. That's what you're doing when you're asking for IE6 to do things like this.]

---

IE7/8?

Yes, there is one solution (the principle is the same one used in this older demo of mine), but it is not persistent (meaning that if you click anywhere else on the page, your expanded content will collapse) and it behaves a bit weird in IE7 (meaning that you have to hover off the clicked element after you click it in order to see your content expanding).

---

IE9+ and the other browsers?

YES! Also persistent. Same principle as the one I used here.

---

JavaScript/ jQuery method?

Yes! See this: a jQuery version of the same demo.

Answer 2

You can do simple Hover dropdown menus with just HTML & CSS which are supported cross browser:

http://jsfiddle.net/fkS2z/

You can improve on this with fades or slidedowns with CSS transitions which are not supported in lower version of IE:

http://jsfiddle.net/N9fDy/1/

Not so much with clicking though.