Efecto tipo acordeón con jQuery

He estado siguiendo uno de los mejores tutoriales sobre jQuery en internet y al ver el ejemplo de carlosssasd sobre un acordeón con CSS3 y HTML5 recordé que en el curso de jQuery nos muestran un ejemplo similar.
Lo he adaptado un poco para hacer el javascript más legible, sin funciones anónimas y al final ha quedado esto:

Ver demo: Acordeón en jQuery.

Es el mismo que se muestra en el tutorial en inglés pero como mencioné, adapté un poquito el javascript para que sea menos confuso.

Al final este es el HTML:

Código :

<!doctype html>
<html>
   <head>
      <meta charset=utf-8>
      <title>Acordeón con jQuery</title>
      <link rel='stylesheet' href='styles.css'>
   </head>
   <body>
   <dl>
      <dt>Juegos Gratis</dt>
      <dd><a href='http://games-garden.com/'>Games-Garden.com</a></dd>
      <dt>Subir Imágenes</dt>
      <dd><a href='http://l4c.me/'>l4c.me</a></dd>
      <dt>Curso de CSS3</dt>
      <dd><a href='http://www.cristalab.com/css3/'>Cristalab.com/css3</a></dd>
      <dt>Tutoriales</dt>
      <dd><a href='http://www.cristalab.com/tutoriales/'>Cristalab.com/tutoriales</a></dd>
   </dl>

   <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
   <script>
      function init()
      {
         $('dd').addClass('esconder');
         $('dl').on('mouseenter', 'dt', mostrarDetalles);
      }

      function mostrarDetalles()
      {
         $(this).next()
            .slideDown()
            .siblings('dd').slideUp();
      }

      init();
   </script>
   </body>
</html>

El HTML es muy simple, tenemos una 'definition list' (<dl>) que es una lista de artículos y su descripción. Los artículos se definen en el tag <dt> y la descripción en el tag <dd>.

Agregamos la librería jQuery que esta hospedada en Google ya que es posible que tus usuarios la tengan en su memoria cache aunque puedes descargarla y ponerla directamente en tu servidor (es mejor si por ejemplo trabajas 'off-line' y no tienes acceso a internet).

Las funciones de javascript son:

Código :

function init()
{
   $('dd').addClass('esconder');
   $('dl').on('mouseenter', 'dt', mostrarDetalles);
}

Con jQuery, accedemos a todos los elementos dd y los escondemos con la clase 'esconder' que está definida en nuestro CSS. Recuerden, <dd> es la descripción del articulo. Ya veremos más adelante el CSS.

En la siguiente línea, con jQuery accedemos al elemento dl y le decimos que 'escuche' cuando el ratón esté sobre alguno de sus elementos dt y si es así, que ejecute la función mostrarDetalles.

Código :

function mostrarDetalles()
{
   $(this).next()
      .slideDown()
      .siblings('dd').slideUp();
}

La función mostrarDetalles ha sido llamada por un dt por ende, en este caso jQuery $(this) es el dt que la ha llamado. Dicho dt le dice al siguiente elemento que se muestre (next().slideDown()) y a los demás elementos dd que se contraigan (slideUp()).

slideDown() y slideUp() son funciones de jQuery que expanden y contraen al elemento que las llama.

El CSS es muy básico, te toca a tí cambiarlo a tu gusto y hacerlo más atractivo.

Código :

body
{
   background: #eee;
   margin: auto;
   text-align: center;
   width: 500px;
}

dt
{
   background: #e3e3e3;
   border-bottom: 1px solid #c5c5c5;
   border-top: 1px solid white;
   cursor: pointer;
   font-weight: bold;
   font-size: 1.5em;
   line-height: 2em;
}

dd
{
   margin: 0;
   padding: 1em 0;
}

.esconder
{
   display: none;
}

Al body le damos un margen automático para que se centre en nuestro navegador, centramos el texto y le damos un ancho de 500 píxeles.
Los dt tendrán un borde gris abajo y blanco arriba. Como queremos que los usuarios sepan que pueden interactuar con los dt, le agregamos la manita del cursor.
Los dd tendrán de margen 0 y de padding 1em.
La clase esconder, hace eso, esconde los elementos que la usen.

Listo! Prueba, descárgalo, cámbialo a tu gusto y utilízalo en tus proyectos

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

<dt>Juegos Gratis</dt> <dd> <ul> <li><a href='http://games-garden.com/'>Games-Garden.com</a></li> <li><a href='http://nukeArcade.com/'>NukeArcade.com</a></li> </ul> </dd>

Por penHolder el 01 de Marzo de 2012

noob question?
como cierro los paneles? es decir, paso el mouse, se abre; vuelvo a pasar, se cierra
Por Acreonte el 01 de Marzo de 2012
penHolder :
noob question?
como cierro los paneles? es decir, paso el mouse, se abre; vuelvo a pasar, se cierra

En la funcion mostrarDetalles, cambia el slideDown por un slideToggle.
Código :
```
function mostrarDetalles()
{
   $(this).next()
      .slideToggle()
      .siblings('dd').slideUp();
}
```
Toggle es 'cambiar', entonces si esta abierto, lo cerrara o viceversa.
Por penHolder el 01 de Marzo de 2012
Acreonte :
Código :
```
function mostrarDetalles()
{
   $(this).next()
      .slideToggle()
      .siblings('dd').slideUp();
}
```
Toggle es 'cambiar', entonces si esta abierto, lo cerrara o viceversa.
hey cool tnx!
Por Nicolas el 01 de Marzo de 2012

podrias agregar un .stop(true,true) despues de .next() porque al pasar muchas veces el mouse rapidamente por los botones se genera un descontrol
Por Acreonte el 01 de Marzo de 2012

Nicolas-blog :
podrias agregar un .stop(true,true) despues de .next() porque al pasar muchas veces el mouse rapidamente por los botones se genera un descontrol

Es mas divertido sin el stop
nah... solo bromeo. Gracias por el tip! asi que chicus, agreguen lo que Nicolas menciona.
Por HtrMancera el 03 de Marzo de 2012

30 days to learn jQuery FTW!
Por ocr1987 el 04 de Marzo de 2012

buenisimo!!

Por Acreonte el 05 de Marzo de 2012

Pepe-blog :

Y para poner mas de una linea, es decir:
Juegos gratis
- diablo 3
- diablo 2

Es simple HTML. Por ejemplo yo lo haria usando listas sin orden (unordered list, <ul>):

Gracias a todos por sus comentarios

Por clindy el 05 de Marzo de 2012

hola quiero hacer los mismo pero en lugar de un <dd> estoy usando un <div>, en lugar del <dl> un <article> y en lugar de <dt> un <h1>, todo perfecto, se abre, osea se muestra lo que está dentro del <div> pero no se cierra cuando el mouse pasa sobre los otros, sino que terminan abriéndose todos
Por Acreonte el 05 de Marzo de 2012

clindy :
hola quiero hacer los mismo pero en lugar de un <dd> estoy usando un <div>, en lugar del <dl> un <article> y en lugar de <dt> un <h1>, todo perfecto, se abre, osea se muestra lo que está dentro del <div> pero no se cierra cuando el mouse pasa sobre los otros, sino que terminan abriéndose todos

Puedes mostrarnos tu codigo para hacer pruebas?
Por clindy el 05 de Marzo de 2012

esta es la pagina , lo subí para que lo veas
http://infogrupo.info/chameleon-develop-web/conJQuery/acordeon-jquery.html
Por HtrMancera el 05 de Marzo de 2012

Cambia

.siblings('div') por .siblings('article')
Por clindy el 05 de Marzo de 2012

@HtrMancera ya lo he probado, queda igual
Por alejo8591 el 05 de Marzo de 2012

Muy sencillo y fácil de entender, pero seria excelente mostrar el código con o sin funciones anónimas pues por algo están creadas; sea por velocidad, por cantidad de lineas de código etc etc [...] pero en general muy bueno
Por Acreonte el 06 de Marzo de 2012
clindy :
esta es la pagina , lo subí para que lo veas
http://infogrupo.info/chameleon-develop-web/conJQuery/acordeon-jquery.html

Cambia
Código :
```
$('div').addClass('esconder');
```
por
Código :
```
$('article').siblings().addClass('esconder');
```
Similar a lo que HtrMancera menciona. Por cierto, gracias HtrMancera, no recordaba siblings().

alejo8591 :
...seria excelente mostrar el código con o sin funciones anónimas pues por algo están creadas...

Gracias por tu comentario, aunque personalmente considero muy mala practica las funciones anónimas, pero quiza a alguna gente le hubiese interesado el tema (y aprender como NO hacer las cosas ).
Por clindy el 06 de Marzo de 2012

bueno si hago eso se esconde todo, ya que dentro del <article> están <h1> y <div> así que no muestra nada, por el momento lo deje con .slideToggle() porque con ese si funciona
Por el 07 de Mayo de 2012

ay por favor se un poquito menos sin vergüenza y deja de pastear tutorial aquí sacados del curso de Jeffrey Ways osea date un poco de respeto y deja el plagio por lo menos la próxima ves apunta de donde sacaste el tutorial por que ni los colores de las listas cambiaste, eso es lo que me cae mal de esta pagina ay tutoriales plagiados con la excusa de que "son traducidos" de gente que original mente los enseña en ingles.Osea que poca vergüenza tiene esta gente vale >_<.
Por Acreonte el 08 de Mayo de 2012

-blog :
...por lo menos la próxima ves apunta de donde sacaste el tutorial por que ni los colores de las listas cambiaste...

Se nota que no leíste el primer parrafo, donde mencioné el curso de Jeffrey Way y tienes razón, no cambie el CSS, pero si cambié el javascript.

-blog :
...ay tutoriales plagiados con la excusa de que "son traducidos" de gente que original mente los enseña en ingles...

Aunque estoy de acuerdo contigo que plagiar no es bueno, no veo nada malo que alguien traduzca algo y lo comparta con los que no sabemos inglés. Amargado!
Por pablo el 27 de Septiembre de 2012

como puedo dejar visible el primero y al mover el mause se reintegre al efecto
Por melquisedecwt el 11 de Enero de 2013

Despues de:
$('dd').addClass('esconder');

Pon lo siguiente:
$('dd').first().removeClass('esconder');
Por mk14 el 03 de Febrero de 2013

Hola! he modificado el codigo para que en lugar de abrirse al pasar el raton se abra al hacer click, ahora lo que quiero es que al hacer otra vez click se cierre esa pestaña, pero siga teniendo el funcionamiento que tiene, es decir que cuando abras otra pestaña la otra se cierre. Este es el codigo que he modificado:

<script>
function init()
{
$('dd').addClass('esconder');
$('dl').on('click', 'dt', mostrarDetalles);
$('dl').on('click', 'dt', esconderDetalles);
}

function mostrarDetalles()
{
$(this).next()
//.stop(true, true)
.slideDown()
.siblings('dd').slideUp();
}

function esconderDetalles()
{

$(this).siblings('dd').slideUp();
//.stop(true, true);
}
init();

</script>

Pero lo que consigo es que se habra y se cierre en el 1r click, como lo hago para que se quede abierto y con el segundo click se cierre?

Gracias!

Efecto tipo acordeón con jQuery

Publica tu comentario

o puedes...