Un acordeon con estilos CSS

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

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

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


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>

Visitar: www.sohtanaka.com/web-design/simple-accordion-w-css-and-jquery
Via: pixelcoblog.com



Noticias de informática:

CSS3 Menu software gratuito
Crea menus con CSS3Menu
Efectos y Recursos de CSS
Heramientas para poner tu css a punto