Acordeón con CSS y jQuery

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.

<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-->

Paso 2: Incluir el CSS.

El siguiente código CSS dara una buena apariencia al acordeón.

<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>

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.

<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>

Ejemplo del Accordion

También te puede interesar

11 Comments

  1. carlos andres restrepo
    may 19, 2010 @ 10:38:31

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

  2. Mau
    oct 19, 2010 @ 10:45:05

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

  3. JUAN
    dic 28, 2010 @ 11:52:19

    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. juan pablo
    mar 23, 2011 @ 12:25:26

    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!!

    • craftyman
      abr 07, 2011 @ 23:35:40

      Gracias por la corrección Juan Pablo,
      Enseguida lo corrijo.

      Saludos.

  5. Ivan Alvizo
    abr 15, 2011 @ 12:48:49

    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. Audish
    abr 26, 2011 @ 13:03:44

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

  7. kiko
    sep 18, 2011 @ 20:19:41

    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.

  8. Daniel Santarriaga
    sep 25, 2011 @ 20:47:25

    La verdad que en esta web he encontrado codigo que me ha salvado la vida, y este no es la excepcion, muchas gracias

  9. lereto
    oct 18, 2011 @ 16:47:23

    para que todo el acordeon aparezca contraido solo borren

    $(‘.acc_trigger:first’)
    .addClass(‘active’)
    .next()
    .show();

    y ya

  10. Hugo
    dic 16, 2011 @ 18:53:19

    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