[JQuery][MEDIO] Hacer un menú tipo acordeón

Los menús tipo acordeón últimamente son un factor muy importante que no falta en la mayoría de los sitios web ya que permiten mostrar bastante información abarcando un pequeño espacio.

Existen varios métodos para hacer esto; es decir, puedes hacer un menú como estos utilizando simplemente el ingenio.

Mostraré cuatro(4)  estilos de como hacer un menú de este tipo empezando por un código largo hasta uno resumido. Utilizarémos listas para hacer de esto algo más sencillo (los ids y clases irán variando pero siempre usarémos la misma estructura):

<ul id="m1">
    <a href="#">Item 1</a>
	<li><a href="#">Item 1</a></li>
	<li><a href="#">Item 2</a></li>
</ul>
<ul id="m2">
	<a href="#">Item 2</a>
	<li><a href="#">Item 1</a></li>
	<li><a href="#">Item 2</a></li>
</ul>

Primer método:

$(function() {
	$('#m1').click(function() {
		$(this).children('li').slideDown('slow');
		$('#m2').children('li').slideUp('slow');
	});
	
	$('#m2').click(function() {
		$(this).children('li').slideDown('slow');
		$('#m1').children('li').slideUp('slow');
	});
});

Hacemos uso del evento click() dependiendo del ID que den click, como se puede observar en el código se muestran los li del ID y se oculta el otro.

Segundo método:

$(function() {
	$('#m1').click(function() {
		$(this).children('li').toggle('slow');
	});
	
	$('#m2').click(function() {
		$(this).children('li').toggle('slow');
	});
});

Usamos el mismo evento a diferencia del efecto slideDown/slideUp el cual lo sustituímos por toggle(). Este efecto intervala un efecto de manera que al 'clicarlo' una vez hará 'X' acción y al 'clicarlo' de nuevo hará la misma 'X' acción; es muy útil si se le da un uso correcto.

Los dos métodos anteriores son funcionales, pero ¿qué sucede si tenemos muchos menús?, nuestro código sería demasiado extenso; para eso utilizaremos príncipalmente el for in (cambiarémos el atributo id por class [todos deberan tener la misma clase]):

Tercer método:

$(function() {
	for(i in $('.m1')){
   		$('.m1').eq( i ).click(function(){
      		$(this).children('li').toggle('slow');
   		});
	};
});

De esta manera así tengamos 100 menús todos se manipularan bajo el código anterior, y aquí entra otra pregunta: ¿pero qué pasa si yo solo quiero que se muestre uno y se oculten los demás?, para esto harémos todavía algo más reducido y demasiado ingenioso:
Cuarto método:

$(function() {
	$('.m1').click(function(){
   		$('.m1').children('li').slideUp('slow');
		$(this).children('li').slideDown('slow');
	})
});

¿Qué hacemos, ¡fácil!, al momento de dar click en cualquier menú ocultará todos los menús que tengan esa clase (en este caso m1) y posteriormente mostrará solo el menú en el cual se hizo click; de esta manera como la anterior podemos tener 100 menús y con ese código se manipularían todos.

Solo sería cuestión de que le agreguen algún CSS con/sin imagenes para que el resultado sea mucho mejor.

muy bueno Xt3mP, descargado y archivado para futuras practicas.

graxé!

No tienes permitido ver enlaces. Registrate o Entra a tu cuenta
muy bueno Xt3mP, descargado y archivado para futuras practicas.

graxé!

De nada, cualquier error o inconveniente que tengas me lo haces saber; saludos.