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.
Implementación
Estructura HTML
<h2 class="acc_trigger"><a href="#">Web Design & 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.
Contenidorelaciondo
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="http://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.
Corolario
La belleza de este ejemplo radica en la simpleza y la facilidad de implementación que permiten una presentación dinámica y vistosa.
Simple Accordion w/ CSS and jQuery
Visitar: www.sohtanaka.com/web-design/simple-accordion-w-css-and-jquery
