Podemos crear un sencillo acordeón en CSS, que al pasar por encima se muestre, (se despliege), y si quitamos el cursor, vuelva a contraerse. Debemos seguir estos pasos:
- Pegar este código CSS en nuestro documento HTML (con sus respectivas tags
, claro está):
- Después, pegar el código HTML, que simplemente es un div principal, “accordion”, y otra capa después que hace llamar a cada caja.
#accordion { width: 500px; height: 400px; margin: 100px auto; } #accordion div { height:25%; overflow: hidden;} #accordion:hover div { height: 20px; } #accordion:hover div:hover { height: 340px; overflow: auto; } #caja1 { background-color: #CCFF99; } #caja2 { background-color:#FF6633; } #caja3 { background-color: #FFCC00; } #caja3 { background-color:#99FFFF; } h1 { font-size: 150%; margin: 10px 10px .2em 25px; } p { margin: 1em 25px; }
Si nos fijamos simplemente es un div que al pasar el ratón por encima (hover), aumenta su height, y se contrae si no está encima.
< div id="accordion">
< div id="caja1">
< h1>Tu títuloh1>
Tu texto
Tu texto
div>
< div id="caja2">
< h1>Tu títuloh1>
Tu texto
Tu texto
div>
< div id="caja3">
< h1>Tu títuloh1>
Tu texto
Tu texto
div>
< div id="caja4">
< h1>Tu títuloh1>
Tu texto
Tu texto
div>
< div style="float: none; clear: both; height: 0;"> div>
div>[/code]
Listo, ya lo tendremos creado, podremos ver un ejemplo de su funcionamiento.