I found the problem lies with the "height". If the height of the <div> or <ul> is set to a specific value e.g. 200px. The menu will collapse in animated fashion if it is set to auto. Here is the test code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/ TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <link rel="stylesheet" href="Work_files/jquery.treeview.css" type="text/css" media="screen" /> <SCRIPT type=text/javascript src="Work_files/jquery-1.3.2.min.js"></ SCRIPT> <SCRIPT type=text/javascript src="Work_files/jquery.treeview.min.js"></ SCRIPT> <style type="text/css"> #browser { font-family: Verdana, helvetica, arial, sans-serif; font-size: 68.75%; } #tree { height:200px; /* <-- set to auto and the menu will not collapse abruptly */ } </style> <script> $(document).ready(function(){ $("#tree").treeview({ animated:'slow',unique: true }) }); </script> </head> <body> <ul class="treeview" id="tree"> <li ><span><strong>Home</strong></span> <ul style="display: none;"> <li>Item X</li> <li><span>header</span> <ul> <li><a href="?y">Item Y</a> </li> </ul> </li> <li class="last"><a href="?z">Item Z</a></li> </ul> </li> <li ><span><strong>News</strong></span> <ul style="display: none;"> <li><a href="?x">Item X</a></li> <li><a href="?y">Item Y</a> </li> <li class="last"><a href="?z">Item Z</a></li> </ul> </li> </ul> </body> </html>
