• Sigueme en Twitter

Sencillo acordeón con Jquery

Acordeón sencillo y elegante

Acordeón sencillo y elegante

Los menús navegables estilo acordeón son un recurso muy usado actualmente, gracias a que estos nos permiten mostrar mucha información en un espacio reducido lo cual los hacen muy útiles. Hoy vamos a crear un acordeón sencillo con la librería Jquery y haciendo solo uso de unas cuantas etiquetas HTML (H3 y p), pues no se diga mas comencemos :

Primero creamos un documento HTML al que podemos llamar acordeón, con la estructura siguiente:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Acordeón</title>
</head>
<body>
<div class="accordion">
 <h3>Tablero</h3>
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada,
 ante at feugiat tincidunt,enim massa gravida metus, commodo lacinia massa diam
 vel eros. Proin eget urna. Nunc fringilla neque vitae odio.
 Vivamus vitae ligula.</p>
 <h3>Entradas</h3>
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada,
  ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam
  vel eros. Proin eget urna. Nunc fringilla neque vitae odio.
  Vivamus vitae ligula.</p>
 <h3>Encuestas</h3>
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada,
 ante at feugiat tincidunt,enim massa gravida metus, commodo lacinia massa diam
 vel eros. Proin eget urna. Nunc fringilla neque
 vitae odio. Vivamus vitae ligula.</p>
 <h3>Objetos</h3>
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada,
  ante at feugiat tincidunt,enim massa gravida metus, commodo lacinia massa diam
  vel eros. Proin eget urna. Nunc fringilla neque
  vitae odio. Vivamus vitae ligula.</p>
 <h3>Herramientas</h3>
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada,
  ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam
  vel eros. Proin eget urna. Nunc fringilla neque
  vitae odio. Vivamus vitae ligula.</p>
</div>
</body>
</html>

Como podemos observar la estructura del código es algo básico, se crea una Clase div la cual se hace llamar “accordion” dicho div es el que contendrá los menús de nuestro acordeón, posteriormente se definen los elementos del acordeón para los títulos se hace uso de la etiqueta H3 y para el contenido la etiqueta P, una ves definida nuestra estructura HTML procedemos a crear un archivo css  el cual lo llamaremos style.css y  pegamos el siguiente código:

body {
 margin: 10px auto;
 width: 570px;
 font: 75%/120% Arial, Helvetica, sans-serif;
}
.accordion {
 width: 480px;
 border-bottom: solid 1px #c4c4c4;
}
.accordion h3 {
 background: #e9e7e7 url(../img/arrow-square.gif) no-repeat right -51px;
 padding: 7px 15px;
 margin: 0;
 font: bold 120%/100% Arial, Helvetica, sans-serif;
 border: solid 1px #c4c4c4;
 border-bottom: none;
 cursor: pointer;
}
.accordion h3:hover {
 background-color: #e3e2e2;
}
.accordion h3.active {
 background-position: right 5px;
}
.accordion p {
 background: #f7f7f7;
 margin: 0;
 padding: 10px 15px 20px;
 border-left: solid 1px #c4c4c4;
 border-right: solid 1px #c4c4c4;
}

Básicamente lo que hicimos fue crear el estilo de la clase “accordion” y algunos estilos para el momento de dar click en nuestros títulos del acordeón

Ahora procedamos a la creación de nuestro archivo js el cual lo llamaremos acordeon.js y  pegamos el siguiente código:

$(document).ready(function(){

 $(".accordion h3:first").addClass("active");
 $(".accordion p:not(:first)").hide();

 $(".accordion h3").click(function(){
 $(this).next("p").slideToggle("slow")
 .siblings("p:visible").slideUp("slow");
 $(this).toggleClass("active");
 $(this).siblings("h3").removeClass("active");
 });

});

Como podemos observar en la segunda linea de nuestro código a nuestra etiqueta H3 le activamos el estilo que creamos en nuestra hoja de estilo style.css, posteriormente en la siguiente linea indicamos que por default nuestro contenido rodeado por la etiqueta P se encuentre oculta, en las siguientes lineas de código se establece la acción al hacer click en los menús de nuestro acordeón.

Nota: Esta es la foma en la que yo comúnmente agrego el código javascript con la linea “$(document).ready(function()” le estoy indicando que quiero que me cargue el código jquery una ves que el DOM esta listo osea la estructura HTML , si esta forma no te gusta igual puedes agregar código dentro del documento HTML  entre las etiquetas del head y quedaría de la siguiente forma:

<head>
<script type="text/javascript">
$(document).ready(function(){

 $(".accordion h3:first").addClass("active");
 $(".accordion p:not(:first)").hide();

 $(".accordion h3").click(function(){
 $(this).next("p").slideToggle("slow")
 .siblings("p:visible").slideUp("slow");
 $(this).toggleClass("active");
 $(this).siblings("h3").removeClass("active");
 });

});
</script>
</head>

Pues bien queda en ti decidir de que manera usas el código, supongamos que usas mi método, lo siguiente es cargar nuestros archivos css y js , así como la librería jquery que en mi caso es la 1.3.1 a nuestro documento HTML dentro de la etiqueta head de nuestro código HTML y quedaría de la siguiente manera:

<head>
<link rel="stylesheet" href="CSS/style.css" type="text/css" />
<script type="text/javascript" src="JS/jquery.js"></script>
<script type="text/javascript" src="JS/acordeon.js"></script>
</head>

Nota: en mi caso cree una carpeta llamada CSS para style.css y una carpeta JS para jquery y acordeón

Y listo tenemos acordeon que nos puede ser de gran ayuda, aca un link de como se debe de ver

Descargar el Ejemplo

Visto en : Webdesignerwall

Anuncios

33 comentarios

  1. Muy bueno el ejemplo. Me quedé husmeando un poco tu buen blog.

    Seguiré pasando

    Gracias

  2. Que tal @goldenahimaaz , gracias, y solo me resta darte la Bienvenida , Saludos 😀

  3. Me parece que el accordeon del ejemplo en ff y en e7 tiene un movimiento poco agradable.

    ademas de que en e6 no funciona .. jeje
    es solo una observación …

  4. Mentiría si te digo que lo prove en IE ya que trabajo en Mac… pero seguramente si es así….Mugre IE jeje… en Firefox si me funciona bien, lo bueno en estos casos es que asi aprendemos a batallar con el IE para que funcione correctamente

  5. Le acabo de dar una provadita al acordeon en IE 6 y 7 y todo funciona bien, quizas alguna parte del codigo pusiste mal @jairo

  6. […] aplendamos Publicado en JQuery | No […]

  7. Mil gracias por este aporte! me has dado la luz al final del túnel en un trabajo pendiente y urgente.

  8. De nada @Lyxxar, que bueno que te haya servido el tuto, Saludos y sigue visitando Applendamos :d

  9. Es muy efectivo pero tarda mucho deberias probar utilizando el core que ya trae integrago la sección UI, del jquery

  10. seria interesante que compartieras lo que mencionas, ya que yo no conozco mucho el lenguaje, saludos @Uziel

  11. Hola, esta simple y super util tengo una duda, y esque e tratado de entender como funciona en si para lograr que comienzen todos cerrados pero no lo e logrado.

    podrias indicarme como y donde para que el acordeon este cerrado al cargar por primeravez?

    saludos

  12. Hola que tal @Carlitos, viendo tu mensaje me puse a ver como podíamos lograr ese efecto que quieres, aunque me lleve un rato ya pude resolverlo (como moraleja , cuando busquemos una libreria guardemos la documentación si no, nos pasa que luego no sabemos que mover jeje).

    Bueno para resolver tu duda primero abre tu archivo “acordeon.js” que esta en la carpeta JS, localizas la linea siguiente :

    $(“.accordion h3:first”).addClass(“active”);

    abajo de esta agregas la siguiente linea :

    $(“.accordion p:first(:first)”).hide();

    y ya debería de funcionar, lo que le decimos al html es que seleccione el primer párrafo y que lo esconda con la instrucción hide, no soy un experto en esto pero espero te haya servido saludos

  13. Muchas gracias, tan solo que las comillas que usaste daban error de sintaxis pero al remplasarlas funciono altiro jeje y que la flechita del lado derecho se muestra alrevez aunque este cerrado pero son detalles menores, me a servido mucho

    muchas gracias

  14. @Diego Armando… solucione lo de la flechita del primer H3 que se mostraba alrevez al darle la orden de que por vez primera el acordion estubiera cerrado.

    arriba del nuevo stracto de codigo que me dijiste que agregara hay que agregar esto tambien:
    $(“.accordion h3:first(:first)”).toggleClass(“active”);

    en conclusion, para que el acordion cargue cerrado… abajo de las lineas 3 y 4 del archivo acordion.js hay que agregar:

    $(“.accordion h3:first(:first)”).toggleClass(“active”);
    $(“.accordion p:first(:first)”).hide();

    saludos

  15. Perfecto @Carlitos, que bien que compartas lo que lograste así todos aprendemos saludos

  16. Muchas gracias por el aporte, se ve q dedicas tu tiempo a los demas y eso se agradece, gracias.

  17. gracias… se hace lo que se puede saludos

  18. Excelente tuto! me ha sido muy útil para esta página que diseñé http://www.rapidpaint.com.ve/faqs.html
    Ahora estoy considerando diseñarme una web personal en la que quisiera utilizar un acordeón horizontal… tenés idea alguna de como podemos hacerlo basados en este mismo tuto?

  19. que tal @luxxar, la verdad no sabría como implementarlo horizontal, pero quizas este articulo te ayude a lo que deseas http://www.portalzine.de/index?/Horizontal_Accordion

  20. Muy buen post, sencillo y claro, felicitaciones

  21. Hola, mira tengo una dudilla respecto al jquery.

    Dentro de la carpeta JS, solo tengo el arcordeon.js, y dices que hay que tener tambien el jquery.js y la verdad que no lo tengo ni se lo que es, como lo hago?

    Soy muy novato, lo siento xD

  22. así @vikS_7 mira el jquery es el framework que utilizaremos para crear nuestros efectos, gracias a jquery podemos construir un sinfín de efectos bastante bonitos y elegantes como este acordeon, ahora bien ese archivo se encuentra en la el link que pongo al final que dice descarga de ejemplo, si no lo encuentras puedes bajar el jquery desde la pagina oficial http://jquery.com/

  23. hola amigo eh implementado tu acordion pero dentro de la etiqueta p trate de introducir un table pero no funciona q debe hacer gracias

  24. Excelente aporte tu accordion, mucho mas liviano que el core de jqueryUI y funciona perfectamente en ie7 y 8.
    en vez de utilizar el selector “p” lo uso con “div” para tener mas flexibilidad de contenidos.
    El resultado es excelente.
    Felicitaciones y gracias por tamaño aporte.

  25. Hola

    Buen aporte, pero trabajando con el me doy cuenta de que si metes un div dentro de un no lo esconde, sabes como podría solucionarlo??

    un saludo

  26. Hola!!
    Pues despues de mucho tiempo a mi me funciono perfecto.
    Si a alguien le pasa lo mismo de querer meter dentro una tabla o algo por el estilo. El problema puede ser que ya tenemos definido en otro .css, lo que hay que hacer es cambiar en style.css la linea:

    .accordion p {

    por cualquier definición que queramos

    .accordion in {

    y en acordion.js

    buscar los p: y cambiarlos por el nombre que dimos, en este caso del ejemplo por in:

    Y listo

    Muchas Gracias

  27. Excelente aporte!

  28. Hola!, tengo el mismo problema. A la hora de meter una table no funciona. Alguna solución?. Gracias!.

  29. como hago para que al comenzar no este abierto ninguna lista. Gracias por el aporte, sirve mucho para aplender 🙂

  30. Disculpen el comentario anterior soy novato, esta era la solución:
    $(“.accordion p:h3(:first)”).hide();

    Plop…

  31. Como Haces para que la imagen de menu (flecha) cambie de posicion , es decir, hacia arriba y abajo.
    mi otra pregunta como es que puedo utilizar una background en vez de esa imagen. cuando este mostrando los submenu tome unbackground diferente

  32. Bueno me uno al comentario, pregunta de Giancarlo he intentado probar a poner un table dentro de la etiqueta p y nada hasta he intentado darle al table mismas caracteristicas que p en la hoja de estilo pero nada la table me sale pero no siempre esta visible no como el texto

  33. Vengo con dos años de retraso pero este código me ayudó mucho. Así que aquí dejo mi código javascript para que se vean todos los “h3” cerrados desde el principio y que solo se cierren/abran al clickarlos no automáticamente.

    jQuery(document).ready(function(){

    jQuery(“.accordion h3:first”).addClass(“active”);
    jQuery(“.accordion h3:first(:first)”).toggleClass(“active”);
    jQuery(“.accordion p:first(:first)”).hide();
    jQuery(“.accordion p:not(:first)”).hide();

    jQuery(“.accordion h3”).click(function(){
    jQuery(this).next(“p”).slideToggle(“slow”);
    jQuery(this).toggleClass(“active”);
    jQuery(this).siblings(“h3”);
    });
    });

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: