Ocultar, mostrar información mediante checkbox
Nota: He estado pensando, después de publicar el post, que esta técnica no es lo que se dice semánticamente correcta, como apunta Chris Coyier en un post dedicado también a este hack.
Disclaimer: Some of this stuff crosses the line of what you “should” do with CSS and introduces some bad semantics. It’s still wicked fun to play with and cool that it’s possible, but in general functional behavior should be controlled by JavaScript.
He estado haciendo algunas pruebas con <input type="checkbox"> con el objetivo de mostrar y ocultar información en formularios. El típico caso de métodos de pago, etc …
La verdad es que me ha sorprendido lo sencilla de esta técnica, que habia visto en algún post que ahora no recuerdo.
Me ha gustado la simpleza tanto en el código Html, como la ausencia de javascript para llevarla a cabo. Mediante el atributo checked y css, podemos generar todos los estados de los botones y mostrar ocultar la información deseada y añadir alguna animación.
Para seleccionar el elemento a mostrar u ocultar podemos utilizar los selectores General sibling (no se muy bien como traducirlo).
Por desgracia no funciona non Explorer 8, aunque no acabo de determinar la causa, hasta donde yo sé IE8 soporta todo el código empleado en la demo.
Aquí el ejemplo simple con un campo de búsqueda.