Acordeón con CSS y jQuery

By
tednologia
-
11
103

Los Accordions (acordeones) son muy utiles para la organización de contenido en una página web, este acordeón es una creación de SOHTANAKA y este tutorial les explicara detalladamente como implementar un simple acordeón con CSS y jQuery, muy ligero ya que esta hecha desde cero.

Paso 1: Estructura HTML.

Primero tenemos que crear la estructura HTML estableciendo los contenidos y secciones para el acordeón.
[html]
<h2 class="acc_trigger">
<a href="#">Sección #1</a></h2>
<div class="acc_container">
<div class="block">
<!–Contenido–>
</div>
</div>
<h2 class="acc_trigger">
<a href="#">Sección #2</a></h2>
<div class="acc_container">
<div class="block">
<!–Contenido–>
</div>
</div>
<!–Más secciones–>
[/html]

Paso 2: Incluir el CSS.

El siguiente código CSS dara una buena apariencia al acordeón.
[css]
<style type="text/css">
.container {
width: 500px;
margin: 0 auto;
}
h2.acc_trigger {
padding: 0; margin: 0 0 5px 0;
background: url(h2_trigger_a.gif) no-repeat;
height: 46px; line-height: 46px;
width: 500px;
font-size: 2em;
font-weight: normal;
float: left;
}
h2.acc_trigger a {
color: #fff;
text-decoration: none;
display: block;
padding: 0 0 0 50px;
}
h2.acc_trigger a:hover {
color: #ccc;
}
h2.active {background-position: left bottom;}
.acc_container {
margin: 0 0 5px; padding: 0;
overflow: hidden;
font-size: 1.2em;
width: 500px;
clear: both;
background: #f0f0f0;
border: 1px solid #d6d6d6;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.acc_container .block {
padding: 20px;
}
</style>
[/css]
Imagen: h2_trigger_a.gif

Paso 3: Incluir la librería jQuery y función JavaScript.

Incluiremos la librería jQuery y colocamos seguidamente el script que dara la funcionlidad de acordeón.
[javascript]
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(‘.acc_container’).hide();
$(‘.acc_trigger:first’)
.addClass(‘active’)
.next()
.show();
$(‘.acc_trigger’).click(function(){
if( $(this).next().is(‘:hidden’) ) {
$(‘.acc_trigger’)
.removeClass(‘active’)
.next()
.slideUp();
$(this).toggleClass(‘active’)
.next()
.slideDown();
}
return false;
});
});
</script>
[/javascript]

Ejemplo del Accordion

RELATED ARTICLESMORE FROM AUTHOR

11 COMMENTS

  1. muy bueno pero ie 7 no notan unos brinquitos cundo se recoge el acorden pero esta muy bueno gracias por el aporte

  2. Muy buen post, gracias por la ayuda!! una pregunta ¿cómo puedo hacer para que todo el acordeón aparezca contraido?

  3. NO ME SALE NO ME FUNCIONA 🙁
    ESTE ES EL CSS LO MODIFIQUE PARA MI WEB
    /*ACORDEON———*/
    .container {
    width: 227px;
    margin: 0 auto;
    }
    h2.acc_trigger {
    padding: 0; margin: 0 0 5px 0;
    width:227px;
    font-weight: normal;
    float: left;
    font-size:11px;
    }
    h2.acc_trigger a {
    color: #000;
    text-decoration: none;
    display: block;
    padding: 5px 0px 5px 5px;
    background-color:#FFF;
    }
    h2.acc_trigger a:hover {
    background-color:#3CF;
    }
    h2.active {
    background-color:#3CF;
    }
    .acc_container {
    overflow: hidden;
    clear: both;
    border: 1px solid #d6d6d6;
    margin: 0 0 5px;
    padding: 0;
    width:225px;
    }
    .acc_container .block {
    padding:5px 0px 5px 5px;
    }
    /*———*/
    ESTOS SON LOS DIVS PONGO EL CODIGO JQUERY NO ME FUNCIONA TENGO LA LIBRERIA 1.4.4 SERA QUE NECEESITO A DEL UI Y NO SOLO LA JQERUY NORMAL?
    Sección #1
    Promociones del Lunes
    Promociones del Lunes
    Promociones del Lunes
    Promociones del Lunes
    Sección #2
    Promociones del Martes
    Promociones del Martes
    Promociones del Martes
    Promociones del Martes
    Sección #3
    Promociones del Miercoles
    Promociones del Miercoles
    Promociones del Miercoles
    Promociones del Miercoles

  4. Tienes un error en el CSS en la linea 24.
    h2.active {background-position: left bottombottom;}
    bottombottom esta dos veces es solo “bottom”
    Muy buen ejemplo me vino de lujo!!

  5. Buen post, que aparte del error de “bottombottom” line 24 del CSS, tambien existe otro en la línea 13 “float: left” del CSS, ya que es necesario borrarlo para que las opciones no se desplacen hacia la derecha cuando se activa una opción.
    Gracias por el aporte!

  6. Hola, sabrías con que función se podría plegar un contenido, clickando en la pestaña del mismo contenido..
    gracias

  7. Hola, me gustaría saber como hacer para que en vez de la primera seccion apareciera la tercera desplegada, me urge mucho, gracias, buen post.

  9. para que todo el acordeon aparezca contraido solo borren
    $(‘.acc_trigger:first’)
    .addClass(‘active’)
    .next()
    .show();
    y ya

  10. Hola mi duda es si con este acordion puedo agregarle tamaños diferentes a cada secion que despliege el acordeon, estoy buscando uno pero todos funcionan solo con un tamaño estandar

Comments are closed.