Crear Accordion con CSS3

Los acordeones nos permiten elegir la sección que deseamos ver dentro de un modulo en una pagina Web, estos también los podemos utilizar para listar una serie de preguntas y expandir las respuestas al darle click o al estar en mouse over.
Esta técnica generalmente se realiza con Javascript y CSS, esta vez haremos la funcionalidad de Accordion con CSS3, librándonos de Frameworks librerías que hacen esto posible, esto como bien saben no lo soporta IE, solo navegadores modernos como Safari, Chrome, Opera y Firefox en sus ultimas versiones.

Estructura HTML

Aquí crearemos la lista que contendrá las secciones para el acordeón

	

        
Heading 1
		
Content For Panel 1.
	
	

        
Heading 2
		
Content For Panel 2
	
	

        
Heading 3
		
Content For Panel 3.
	
	

        
Heading 4
		
Content For Panel 4
	

Estilos para el Accordion

Para darle la funcionalidad de acordeón a la lista, utilizaremos la propiedad “transition”.

/* CSS3 Transition Effect */
transition: height 0.3s ease-in-out;
-moz-transition: height 0.3s ease-in-out;
-webkit-transition: height 0.3s ease-in-out;
-o-transition: height 0.3s ease-in-out;

Aquí todo el código CSS.

.verticalaccordion>ul {
    margin: 0;
    padding: 0;
    list-style:none;
    width: 500px;
}
.verticalaccordion ul>li {
    display:block;
    overflow: hidden;
    margin: 0;
    padding: 0;
    list-style:none;
    height:40px;
    width: 500px;
    /* Decorative CSS */
    background-color:#f0f0f0;
    /* CSS3 Transition Effect */
    transition: height 0.3s ease-in-out;
    -moz-transition: height 0.3s ease-in-out;
    -webkit-transition: height 0.3s ease-in-out;
    -o-transition: height 0.3s ease-in-out;
}
.verticalaccordion ul>li>h3 {
    display:block;
    margin: 0;
    padding:10px;
    height:19px;
    /* Decorative CSS */
    border-top:#f0f0f0 1px solid;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration:none;
    text-transform:uppercase;
    color: #000;
    background: #cccccc;
}
.verticalaccordion ul>li>div {
    margin:0;
    overflow: auto;
    padding:10px;
    height:220px;
}
.verticalaccordion ul>li:hover {
    height: 280px;
}
.verticalaccordion:hover ul>li:hover>h3 {
    /* Decorative CSS */
    color:#fff;
    background: #000000;
}
.verticalaccordion ul>li>h3:hover {
    cursor:pointer;
}

Descargar