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 <style type=”text/css”></style>, 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.

  2. 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ítulo</h1>
<p>Tu texto</p>
<p>Tu texto</p>
	</div>
		<div id="caja2">
			<h1>Tu título</h1>
			<p>Tu texto</p>
                        <p>Tu texto</p>
</div>
		<div id="caja3">
	         	<h1>Tu título</h1>
	               <p>Tu texto</p>
                       <p>Tu texto</p>
	               </div>
		<div id="caja4">
	<h1>Tu título</h1>
	               <p>Tu texto</p>
                       <p>Tu texto</p>
</div>
		<div style="float: none; clear: both; height: 0;"> </div>
	</div>

Listo, ya lo tendremos creado, podremos ver un ejemplo de su funcionamiento.




Sigue la onda…

Puedes recibir gratis más artículos por RSS, Twitter, Facebook o correo electrónico. ¡Muchas gracias por leerme!