Sencillo menu tipo acordeón utilizando jQuery

Utilizando la librería jQuery podemos crearnos un menú tipo acordeón con muy pocas líneas de código.

Como siempre, lo primero que debemos hacer es cargar en nuestra página la librería. Podemos descargarnos la última versión desde http://jquery.com/ .

El HTML sería muy sencillo, creamos un contenedor <div class=”acordeon”> y en el incluimos nuestro contenido formateandolo como queramos.

En el <head> de tu página incluye lo siguiente:

<script type="text/javascript">
$('.acordeon div').hide();
$(".acordeon h2").click(function() {
    if($(this).next('div').hasClass('hide')){ // si esta cerrado
        $('.acordeon div').hide('slow'); //  cierro todas las capas
        $('.acordeon div').addClass('hide'); // pongo a todas las capas class de cerradas
        $('.acordeon h2').removeClass('abierto'); // quito class abierto a todos los titulos
        $(this).next('div').removeClass('hide'); // quito class de cerrado a mi capa
        $(this).next('div').show('slow'); // abro mi capa
        $(this).addClass('abierto'); // pongo mi titulo como abierto
 
   }else{ // si esta abierto
    	$('.acordeon h2').removeClass('abierto'); // quito class abierto de todos los titulos
        $('.acordeon div').hide('slow'); // cierro todas las capas
        $('.acordeon div').addClass('hide'); // pongo class hide a todas las capas
	}
});
</script>

Ahora sólo te queda ponerlo bonito añadiendo estilos.

3

Comentarios (3)

  1. andres -

    como le arias para que el mecanismo fuera
    TITULO1
    –CONTENIDO1
    TITULO2
    –TITULO3
    —-CONTENIDO2
    –TITULO4
    Osea acordeon dentro de otro acordeon

    • Emilio -

      Gracias Andrés por tu comentario, me apunto tu pregunta para un próximo post.

      • Review by Richard A. Nardi for Rating: Beautiful, large pictures of finished designs and step by step instructions. Oriented toward the beginner rather than the professional. Just being able to point to a picture and say “That is what I want” is worth the price of the book. I want to go out and build a stone path right now!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *