Menu desplegable con efecto acordeon – jQuery

Hoy te voy a mostrar como crear un menú desplegable con efecto acordeón, el menú contendrá tres secciones, que serán desplegadas al hacer clic
sobre ellas mostrando su contenido y esconderá el resto del contenido de las demás secciones, el código es muy sencillo y fácil de entender y
el resultado perfecto si le añadimos un poco de CSS

En un documento HTML 5 creamos una lista desordenada (UL) con identificador “acordeon_didesweb”, dentro de esta creamos un encabezado de nivel 4 con clase “menues”, seguido de un elemento <li> con clase “contenido_acordeon” en el que incluiremos el contenido, volvemos a crear los elementos h4 y li dos veces más ( que serán el segundo y tercer menú ).

<ul id="acordeon_didesweb">
	<h4 class="menues">Menu 1</h4>
	<li class="contenido_acordeon">
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
	</li>
	<h4 class="menues">Menu 2</h4>
	<li class="contenido_acordeon">
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus	
	</li>
	<h4 class="menues">Menu 3</h4>
	<li class="contenido_acordeon">
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
	</li>
</ul>

A continuación creamos el script. Empezamos ocultando los elementos que queremos ocultar, en este caso serán los elementos con clase “contenido_acordeon” que están dentro del elementos con identificador “#acordeon_didesweb”, seguidamente con el selector “not” le indicamos que los elementos con clase “menues” que han sido desplegados y los elementos que contiene, es decir “contenido_acordeon” que no sean afectados por el metodo hide(), que es el metodo que oculta los elementos.

$('#acordeon_didesweb .contenido_acordeon').not('.menues.desplegado + .contenido_acordeon').hide();

Creamos una función “click” referenciando a “#acordeon_didesweb .menues”, que serán los elementos h4 en los que haremos click para desplegar el contenido.

$('#acordeon_didesweb .menues').click(function(){

Ahora generamos una estructura “if” para añadir o quitar la clase en función del evento seleccinado, accedemos a los elementos con “$(this)”, primero con el método “hassClass” detectamos si algún elemento tiene la clase “desplegado”, luego con el método “removeClass()” eliminamos la clase “desplegado”, ahora con el método
“next()” que devuelve el siguiente elemento del mismo nivel del elemento seleccionado y le añadimos el método “slideUp” para ocultar el elemento

	if ($(this).hasClass('desplegado')) {
		$(this).removeClass('desplegado');
		$(this).next().slideUp();

Cerramos el “if” y abrimos un “else”, igual que antes, con el método “removeClass()”, eliminamos la clase “desplegado”, esta vez, de todos los “menues”, con “$(this)”
agregamos de nuevo la clase “desplegado” con el método “addClass” …

	} else {
		$('#acordeon_didesweb .menues').removeClass('desplegado');
		$(this).addClass('desplegado');

… seguimos con el “else”, lo he partido en dos secciones para que el código no sea muy engorroso, ahora con el metodo slideUp ocultamos el elemento que está “desplegado” y con el método “next()” mostramos el siguiente elemento del mismo nivel del elemento seleccionado, es decir, el contenido del menú que hemos seleccionado

		$('#acordeon_didesweb .contenido_acordeon').slideUp();
		$(this).next().slideDown();

El script completo

$('#acordeon_didesweb .contenido_acordeon').not('.menues.desplegado + .contenido_acordeon').hide();
 $('#acordeon_didesweb .menues').click(function(){
	if ($(this).hasClass('desplegado')) {
		 $(this).removeClass('desplegado');
		 $(this).next().slideUp();
	} else {
		 $('#acordeon_didesweb .menues').removeClass('desplegado');
		 $(this).addClass('desplegado');
		 $('#acordeon_didesweb .contenido_acordeon').slideUp();
		 $(this).next().slideDown();
	}
 });

Cerramos “else” y la función, el resultado del código generado es perfectamente funcional sin aplicar CSS, pero el efecto no es muy agradable, así que a continuación te muestro un ejemplo maquetado con CSS

El codigo completo

<!DOCTYPE HTML>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Didesweb - Efecto acordeón con jQuery</title>
	<style>
	*{margin: 0;}
		#acordeon_didesweb{ 
		width: 300px;
		list-style-type: none;
	}
	.menues { 
		background: #413f40; 
		color: #99CC00; 
		border-bottom: 1px solid #333333; 
		border-top: 1px solid #444444; 
		cursor: pointer;
		margin-right: 10px;
		padding: 20px; 
	}
	.contenido_acordeon { 
		background: #CCCCCC; 
		line-height: 1.6em;
		padding: 20px;
	width: 250px;
		}
	.menues.desplegado, .menues:hover { 
		background: #444444;
		color:#D78500;
	}
	</style>
	<script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
	<ul id="acordeon_didesweb">
		<h4 class="menues">Menu 1</h4>
		<li class="contenido_acordeon">
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
		</li>
		<h4 class="menues">Menu 2</h4>
		<li class="contenido_acordeon">
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
		</li>
		<h4 class="menues">Menu 3</h4>
		<li class="contenido_acordeon">
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
		</li>
	</ul>
	<script>
		$('#acordeon_didesweb .contenido_acordeon').not('.menues.desplegado + .contenido_acordeon').hide();
		$('#acordeon_didesweb .menues').click(function(){
			if ($(this).hasClass('desplegado')) {
				$(this).removeClass('desplegado');
				$(this).next().slideUp();
			} else {
				$('#acordeon_didesweb .menues').removeClass('desplegado');
				$(this).addClass('desplegado');
				$('#acordeon_didesweb .contenido_acordeon').slideUp();
				$(this).next().slideDown();
			}
		});
	</script>
</body>
</html>

Puedes ver el código de este archivo en mi cuenta de GitHub