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.
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>
thanks.
17 comentarios, 2 referencias
+
#