Simple Acordion con CSS y jQuery

Sin dudas presentar el contenido usando un efecto de acordeón, es elegante, atractivo y ayuda a crear una presentación más limpia.

Simple Acordion with CSS & jQuery es un tutorial publicado por Soh Tanaka y que explica paso a paso como hacer usando CSS y jQuery.

Contenido

1 Implementación
2 Corolario
- 2.1 Simple Accordion w/ CSS and jQuery

Implementación

Estructura HTML

<h2 class="acc_trigger"><a href="#">Web Design &amp; Development</a></h2>
<div class="acc_container">
<div class="block">
<!--El contenido va aquí-->
</div>
</div>

Cada contenedor comienza por el título H2 y el contenido que se mostrará cuando de desplace es el que va dentro de las clases clase acc_container y block (el ejemplo muestra una sola).

Código CSS

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

El código CSS es algo extenso pero basta examinarlo un poco para ver que no es nada complicado y que no utiliza nada raro ni rebuscado.

Configurar jQuery

Antes de continuar, hay que enlazar la biblioteca jQuery en la sección HEAD del HTML de la página:

<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js">
</script>

Luego el código Javascript que implementa el funcionamiento del acordeón:

<script type="text/javascript">
$(document).ready(function(){
//COMPORTAMIENTO POR DEFECTO/CONFIGURACIÓN CUANDO CIERRA
$('.acc_container').hide(); //ESCONDER/CERRAR TODOS LOS CONTENEDORES
$('.acc_trigger:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container
//On Click
$('.acc_trigger').click(function(){
if( $(this).next().is(':hidden') ) { //SI SE CIERRA EL SIGUIENTE CONTENEDOR...
$('.acc_trigger').removeClass('active').next().slideUp(); //Remove all .acc_trigger classes and slide up the immediate next container
$(this).toggleClass('active').next().slideDown(); //Add .acc_trigger class to clicked trigger and slide down the immediate next container
}
return false; //PREVENIR EL SALTO AL SIGUIENTE ENLACE (LINK)
});
});
</script>

El código de arriba es muy sencillo de comprender, simplemente se puede ver como oculta y muestra las distintas partes del acordeón.