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á):

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