acordeoncss

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:

  1. Pegar este código CSS en nuestro documento HTML (con sus respectivas tags

    , claro está):

  2. #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.

  3. 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.
< 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.