JMiur [E]

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

26 comentarios:

Unknown  

Queda tan delicado, precioso!

Responder
JMiur  

Lindo :D

Responder
Rahartt  

Hola, he provado lo que explicas, pero solo me funciona en safari... No entiendo como a ti te funciona en los diferentes navegadores y en canvio a mi solo en safari cuando el codigo que he usado es el mismo que el que pones en el post.

Gracias

Responder
JMiur  

No sabría decirte sobre Safari. En Chrome se ve normal y utilza el mismo motor de Safari.

No sé donde tienes un ejemplo para verificar si hay un error.

Responder
Rahartt  

Gracias por tu respuesta, si visitas http://www.ilcircoitaliano.com/esp/inici.html y visualizas el codigo, veras que en el header hay el codigo que tu has puesto (con algunos estilos canviados) y que unas cuantas lineas mas avajo hay el contenido (esta dentro de la div contingut)

Responder
JMiur  

Lo que noto es que el script se carga correctamente pero n ose ejecuta. Prueba eliminar el CDATA ya que es posible que el tipo de documento no lo interprete correctamente.

Borra esta línea:

//<![CDATA[

y esta línea:


//]]>

Responder
Yebra  

Hola,
Solo una pequeña consulta JMiur,
¿se puede poner para que se despliegue no siempre el primero, si no el que uno quiera ?

Responder
JMiur  

No sé, Yebra. HAbría que probar pero para eso debería cambiarse el script.

Responder
Yebra  

Gracias JMiur, seguiré probando.
Saludos

Responder
Ckjones1  

Hola... Pregunto.. no hay una manera de utilizar en vez de el Deslizamiento utilizar un efecto de Fade?

Responder
JMiur  

Tendrías que probar y ver. No sé cuál sería el resultado o si será necesario modificar las reglas de estilo.

Responder
candy  

hola!! que tal??
hago todo lo que dices en tu post y no me funciona que crees que podria estar mal, me aparece todo desplegado y en ningún momento se contrae :(

Responder
JMiur  

Si no me muestras el ejemplo, no puedo saberlo.

Responder
investigador cybernetico  

Buenisimo
Ando buscando esto durante dias, gracias al santisimo llegue a tu blog :P porque ya me estaba volviendo loco

Una consulta, como o que tendria que modificar para que los contenedores esten de derecha a izquierda en lugar de arriba - abajo?.

Responder
JMiur  

Tendrías que buscar un script diferente porque para hacer eso, las modificaciones son muchas.

Responder
investigador cybernetico  

Oh bueno continuare mi búsqueda, repito tu blog esta buenísimo ya me pasare a ver si aprendo algo más.

Saludos

Responder
TV Esperanza  

Excelente, Muchas Gracias!!!. +100%

Responder
marcos  

Hola gran tutorial, necesito hacer para que una vez abierto el acordeon, el paso 1 por ej, si pulsas a un enlace dentro de ese mismo acordeon desplegado, vayan cambiando divs horizontalmente. Como si fueran pasos para un registro de un formulario.

sabrias como hacer? muchas gracias!

JMiur  

Eso es algo que tendrás que investigar y ver si es posible hacerlo.

Responder
Unknown  

no me funciona podrías por favor hacer un archivo index.html funcional y dejarlo para descargar para ver que hice mal gracias

JMiur  

Sería más fácil si mostraras tu ejemplo.

Responder
Javier L Ramírez  

Muchas gracias, muy útil.

Disculpa, ¿en que parte puedo editar el color del texto contenido?

JMiur  

En la etiqueta que uses. Si el texto está en un div:

#accordion div {color:red;}

Responder
Unknown  

hola amigo me puedes pasar todo el codigo del ejemplo que pusiste, me gusto ese acordion. Pero el codigo que pusiste no es el del ejemplo chris_azul10@hotmail.com

JMiur  

Son los que están el el post.

Responder
Unknown  

Muchas gracias por el aporte, sencillo, bonito y funcional.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR