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

jfdghjhthit45

También te puede interesar

2 Comments

  1. uberVU - social comments
    abr 05, 2010 @ 16:31:21

    Social comments and analytics for this post…

    This post was mentioned on Twitter by craftyman: Crear Accordion con CSS3 | Craftyman Blog http://bit.ly/9MSxA0

  2. Mario Sánchez
    jul 17, 2011 @ 01:32:38

    muchas grácias pana