I was trying to implement a collapsible menu using jQuery following John Resig’s online tutorial. it was great, such a nice effect with little code, I found one problem with the effect though, when I tried to click on the menu item which was already open it animated the list items again, I searched for any fixes for this but was not able to fin one so I thought let me try to fix this, here is the JavaScript fix for that
JavaScript
$(function() {
$("dd:not(:first)").hide();
$("dt a").click(function() {
var curr_dd = $(this).parent().next();
if (curr_dd.css("display") != "none")
return;
$("dd:visible").slideUp("slow");
curr_dd.slideDown("slow");
return false;
});
});
HTML
<dl>
<dt><a href="#">Menu 1</a></dt>
<dd>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
</dd>
<dt><a href="#">Menu 2</a></dt>
<dd>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
</dd>
<dt><a href="#">Menu 3</a></dt>
<dd>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
</dd>
<dt><a href="#">Menu 4</a></dt>
<dd>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
</dd>
</dl>