Acordeones simples con jQuery

En Applendamos mustran una forma de crear acordeones con jQuery. Lo interesante es que el método es muy simple y no tiene mayores restricciones por lo que es posible adaptarlos a cualquier tipo de diseño.

Obviamente, necesitamos jQuery que colocamos antes de </head>:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js' type='text/javascript'/>

Inmediatamente después, ponemos la función:

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
  $("#accordion h3:first").addClass("active");
  $("#accordion div:not(:first)").hide();
  $("#accordion h3").click(function(){
    $(this).next("div").slideToggle("slow")
    .siblings("div:visible").slideUp("slow");
    $(this).toggleClass("active");
    $(this).siblings("h3").removeClass("active");
  });

/* IDEM PERO EL PRIMERO DESPLEGADO
  $("#acordeon h2:first").addClass("active");
  $("#acordeon div:not(:first)").hide();
  $("#acordeon h2").click(function(){
    $(this).next("div").slideToggle("slow")
    .siblings("div:visible").slideUp("slow");
    $(this).toggleClass("active");
    $(this).siblings("h2").removeClass("active");
  });
*/

});
//]]>
</script>

Y el CSS que es lo personalizable:

<style>
  #accordion { /* el rectángulo contenedor */
    width:450px;
  }
  #accordion h3 { /* los enlaces que despliegan y contraen el contenido */
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: 0 0 10px #444 inset;
    -webkit-box-shadow: 0 0 10px #444 inset;
    box-shadow: 0 0 10px #444 inset;
    background-color: #DCDFF4;
    color: #6D76AF;
    cursor: pointer;
    font-family: Tahoma;
    font-size: 17px;
    font-weight: normal;
    height: 1.7em;
    line-height: 1.7em;
    margin: 0 0 2px;
    padding: 0 20px;
    position: relative;
  }
  #accordion h3:hover { /* efecto hover sobre esos enlaces */
    -moz-box-shadow: 0 0 10px #000 inset;
    -webkit-box-shadow: 0 0 10px #000 inset;
    box-shadow: 0 0 10px #000 inset;
    background-color: #BBBFF4;
    color: #FFF;
  }
  #accordion h3 span { /* una imagen que permuta segñun el estado del contenido */
    background: transparent url(archivo) no-repeat right top;
    display: block;
    height: 16px;
    position: absolute;
    right: 20px;
    top: 7px;
    width: 16px;
  }
  #accordion h3.active span { /* desplegado */
    background-position: right bottom;
  }
  #accordion div { /* el contenido */
    background-color: #000;
    border: 1px dotted #666;
    color: #AAA;
    font-family: Georgia;
    font-size: 13px;
    line-height: 1.5;
    margin: 10px;
    padding: 10px;
  }
</style>

Eso es todo. Ahora, basta crear el HTML que ponemos allí donde querramos verlo:

<div id="accordion">
  <h3> el enlace del primer elemento <span></span></h3>
  <div> el contenido del primer elemento </div>
  <h3> el enlace del segundo elemento <span></span></h3>
  <div> el contenido del segundo elemento </div>
  <!-- y seguimos agregando elementos enlace + contenido -->
</div>

Lo que hace el script es crear un enlace en la etiqueta H3 que desplegará eso que está en un DIV colocado inmediatamente después.

En todo caso, si se quieren usar otras etiquetas, simplemente se cambian en el script y si al empezar, quisiéramos que todos se muestren contraidos, lo cambiaríamos de este modo:

$(document).ready(function(){
  $("#accordion div").hide();
  $("#accordion h3").click(function(){
    $(this).next("div").slideToggle("slow")
    .siblings("div:visible").slideUp("slow");
    $(this).toggleClass("active");
    $(this).siblings("h3").removeClass("active");
  });
});

Eventualmente, el contenido puede mostrarse todo desplegado y pasado un tiempo (cuando se carga la página) se cierra. Eso depende de la velocidad de carga así que lo mejor es ocultarlo y mostrarlo cuando ya está todo listo; para eso, cambiamos la regla de estilo del contenedor:

#accordion {
  visiblilty: hidden;
  width:450px;
}

Y luego, en el script, lo mostramos cuando se cargue por completo:

$(document).ready(function(){
  .......
  document.getElementById("accordion").style.visibility="visible";  
});