アコーディオンで　カテゴリーを作成したと思っています。
やりたいことは 下記になります。

＋親カテゴリー
−親カテゴリー
　子カテゴリー
　子カテゴリー
　子カテゴリー
　子カテゴリー
＋親カテゴリー
−親カテゴリー
　子カテゴリー
　子カテゴリー
＋親カテゴリー

＋をを押すと　子カテゴリーが表示する。

http://vosegus.org/JSDepository/jquery/index.html#showhidei

上記のサイトを見て修正したのですが　どこの＋を押しても親カテゴリーが表示されたり　非表示されたりで困っています。
j$(this).next()の部分が悪いと思います。　

ソースは下記になります。

/************* category.tpl***************/

<li class="level<!--{$level}--><!--{if in_array($arrTree[cnt].category_id, $tpl_category_id) }--> onmark<!--{/if}-->">

<!--{if $arrTree[cnt].display == 1}-->
<font class="acc0">+</font>
<a href="<!--{$smarty.const.URL_DIR}-->products/list.php?category_id=<!--{$arrTree[cnt].category_id}-->"
<!--{if in_array($arrTree[cnt].category_id, $tpl_category_id) }--> class="onlink"<!--{/if}-->>
<!--{$arrTree[cnt].category_name|escape}-->
</a>
<!--{else}-->
<a class="acc1" href="<!--{$smarty.const.URL_DIR}-->products/list.php?category_id=<!--{$arrTree[cnt].category_id}-->"
<!--{if in_array($arrTree[cnt].category_id, $tpl_category_id) }--> class="onlink"<!--{/if}-->>
<!--{$arrTree[cnt].category_name|escape}-->
</a>
<!--{/if}-->

/************* js ***************/

var j$ = jQuery;
j$(function(){
j$(".acc").each(function(){
j$("li > font", this).each(function(index){
var $this = j$(this);
if(index > 0) j$(".acc1").hide();
$this.click(function(){
var params = {height:"toggle", opacity:"toggle"};
j$(this).next().animate(params).parent().siblings()
.children("ul:visible").animate(params);
return false;
});
});
});
});

どなたかお力添えお願いします。　できればソースも張って頂くと助かります。