Comunidad de diseño web y desarrollo en internet

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.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate