こんにちは。どうしてもわからず困っております。
申し訳ございませんが、どなたかご教授いただけると幸いです。

現在、このようなソースをカテゴリの部分に入れています。

----------------------------------------------------------

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.accordion_head').click(function() {
$('.accordion_head').next().slideUp();
$(this).next().slideToggle();
}).next().hide();
});
</script>

<div class="block_outer">
<div class="category_area">
<div class="block_body">
<h2><img src="<!--{$TPL_URLPATH}-->img/title/tit_bloc_category.gif" alt="商品カテゴリ" /></h2>
<!--{strip}-->
<ul class="categorytree">
<!--{assign var=preLev value=1}-->
<!--{assign var=firstdone value=0}-->
<!--{section name=cnt loop=$arrTree}-->
<!--{* 表示フラグがTRUEなら表示 *}-->
<!--{if $arrTree[cnt].display == 1}-->
<!--{assign var=level value=`$arrTree[cnt].level`}-->
<!--{assign var=levdiff value=`$level-$preLev`}-->
<!--{if $levdiff > 0}-->
<ul>
<!--{elseif $levdiff == 0 && $firstdone == 1}-->
</li>
<!--{elseif $levdiff < 0}-->
<!--{section name=d loop=`$levdiff*-1`}-->
</li>
</ul>
<!--{/section}-->
</li>
<!--{/if}-->

<ul class="accordion">
<li>
<div class="accordion_head">
<!--{if $arrTree[cnt].category_id == 1}-->ファッション<!--{elseif $arrTree[cnt].category_id == 2}-->雑貨<!--{elseif $arrTree[cnt].category_id == 3}-->インテリア<!--{elseif $arrTree[cnt].category_id == 4}-->家電<!--{elseif $arrTree[cnt].category_id == 5}-->スポーツ<!--{/if}--></div>

<!--↓アコーディオンする部分。ここから↓-->
<ul>
<li>
<a href="#">sample1</a>
</li>
<li>
<a href="#">sample2</a>
</li>

<li>
<a href="#">sample1</a>
</li>
<li>
<a href="#">sample2</a>
</li>
</ul>
<!--↑アコーディオンする部分。ここまで↑-->
</li>
</ul>


<!--{if $firstdone == 0}--><!--{assign var=firstdone value=1}--><!--{/if}-->
<!--{assign var=preLev value=`$level`}-->
<!--{/if}-->
<!--{* セクションの最後に閉じタグを追加 *}-->
<!--{if $smarty.section.cnt.last}-->
<!--{if $preLev-1 > 0}-->
<!--{section name=d loop=`$preLev-1`}-->
</li>
</ul>
<!--{/section}-->
</li>
<!--{else}-->
</li>
<!--{/if}-->
<!--{/if}-->
<!--{/section}-->
</ul>
<!--{/strip}-->
</div>
</div>
</div>

----------------------------------------------------------


<div class="accordion_head">内の第一階層をクリックすると、
下にするするっと第二階層がスライドしながら出てくるようにしたいです。

その為には、<!--↓アコーディオンする部分。ここから↓-->から、
<!--↑アコーディオンする部分。ここまで↑-->の中をどのように記載すれば良いのか、
いろいろ試しましたが、うまくいきません。

大変申し訳ございませんが、どなたかご教授いただけると大変助かります。

過去の記事です。参考になれば。
http://xoops.ec-cube.net/modules/newbb/viewtopic.php?topic_id=12852&forum=10