Contenido

Expandable Sidebar Menu, el acordeón de jQuery

15 nov

+ 37

Si eres de los que aman jQuery por encima de todas las cosas, pero el acordeón de moo.fx te hace dudar sobre tu amor. Ya puedes estar tranquilo, los chicos de jQuery se han puesto manos a la obra para que nunca más vuelvas a dudar sobre tus sentimientos.

jqueryaccordion.jpg

La verdad es que es bastante simple de montar, asi que para demostrar lo fácil que es han hecho un video explicativo para que nadie se pierda.

Que necesitamos

Necesitamos un fichero HTML que usaremos de base.


<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
	<title>DL Demo</title>
	<style>
	body { font-family: Arial; font-size: 16px; }
	dl { width: 300px; }
	dl,dd { margin: 0; }
	dt { background: #F39; font-size: 18px; padding: 5px; margin: 2px; }
	dt a { color: #FFF; }
	dd a { color: #000; }
	ul { list-style: none; padding: 5px; }
	</style>
</head>

<body>
<dl>
	<dt><a href="xinha_editor.html/">jQuery</a></dt>
	<dd>
	<ul>
		<li><a href="xinha_editor.html/src/">Download</a></li>
		<li><a href="xinha_editor.html/docs/">Documentation</a></li>
		<li><a href="xinha_editor.html/blog/">Blog</a></li>

	</ul>
	</dd>
	<dt><a href="xinha_editor.html/discuss/">Community</a></dt>
	<dd>
	<ul>
		<li><a href="xinha_editor.html/discuss/">Mailing List</a></li>
		<li><a href="xinha_editor.html/tutorials/">Tutorials</a></li>

		<li><a href="xinha_editor.html/demos/">Demos</a></li>
		<li><a href="xinha_editor.html/plugins/">Plugins</a></li>
	</ul>
	</dd>
	<dt><a href="xinha_editor.html/dev/">Development</a></dt>
	<dd>
	<ul>

		<li><a href="xinha_editor.html/src/">Source Code</a></li>
		<li><a href="xinha_editor.html/dev/bugs/">Bug Tracking</a></li>
		<li><a href="xinha_editor.html/dev/recent/">Recent Changes</a></li>
	</ul>
	</dd>
</dl>
</body>
</html>

Como podemos ver, se trata de una lista de definiciones, indicando en su <dt></dt> el título de la sección y en su <dd></dd> una lista con lo que incluye esta sección.  

Una vez visto esto, comienza la mágia, 8 líneas de código para conseguir un efecto acordeon muy bonito.


	<script src="jquery.js"></script>
	<script>
	$(document).ready(function(){
		$("dd:not(:first)").hide();
		$("dt a").click(function(){
			$("dd:visible").slideUp("slow");
			$(this).parent().next().slideDown("slow");
			return false;
		});
	});
	</script>

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.