Haga clic en encabezado y expanda texto sin usar JavaScript/jQuery

Question

Como se señala en el título, mi pregunta es muy simple: ¿hay alguna manera de que pueda hacer clic en un encabezado (título) y expandir (y contraer) un texto asociado con él, sin usar JavaScript ni jQuery? ¿Hay alguna forma compatible con el navegador de hacer esto (prueba IE 6+)?

He creado un sitio HTML + CSS muy simple para una conferencia, y me gustaría utilizar JS solo si es necesario. Entonces, solo estoy preguntando si puedo hacerlo pegándome solo a HMTL/CSS, de una manera compatible, por supuesto.

Las pocas soluciones que he encontrado son antiguas o incompatibles con algunas versiones de navegador.

Muchas gracias, João

Answer 1

IE6 -proof pure CSS solution?

NO

[dejar el resto muertos en sus tumbas, no trate de hacerlos correr un maratón. Eso es lo que está haciendo cuando se está pidiendo IE6 hacer cosas como esta.]

---

IE7/8?

Sí, hay una solución (el principio es el mismo que se usa en this older demo of mine), pero no es persistente (lo que significa que si hace clic en cualquier otro lugar de la página, su contenido expandido colapsará) y se comporta como un un poco raro en IE7 (lo que significa que tiene que desplazarse sobre el elemento cliqueado después de hacer clic para ver su contenido en expansión).

---

IE9 + y los otros navegadores?

YES! También persistente. El mismo principio que el que usé here.

---

Método de JavaScript/jQuery?

Sí! Ver esto: a jQuery version of the same demo.

Answer 2

Usted puede hacer menús Hover desplegables sencillas con sólo HTML & CSS que se apoyan entre navegadores:

http://jsfiddle.net/fkS2z/

Usted puede mejorar esto con fundidos y deslizamientos con transiciones CSS que no son compatibles con la versión inferior de IE:

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

No tanto con hacer clic sin embargo.