アコーディオンメニューについて

質問

jQueryを使ったアコーディオンメニューを作成しているのですが、
<dt>をクリックすると<dd>部分に外部のテキストファイルを表示させる方法がわかりません。

以下の記述に何を付け足せば良いのですか？

$(function(){
$("dd:not(:first)").css("display","none")
$("dt:first").addClass("selected");
$("dl dt").click(function(){
if($("+dd",this).css("display")=="none"){
$("dd").slideUp("slow");
$("+dd",this).slideDown("slow");
$("dt").removeClass("selected");
$(this).addClass("selected");
}
}).mouseover(function(){
$(this).addClass("over");
}).mouseout(function(){
$(this).removeClass("over");
})
})

<dl>
<dt>Step.1</dt>
<dd><p>Lorem ...（中略）... venenatis.</p></dd>
<dt>Step.2</dt>
<dd><p>Integer ...（中略）... accumsan. </p></dd>
<dt>Step.3</dt>
<dd><p>Integer ...（中略）... imperdiet. </p></dd>
</dl>

回答No.1

yyr446

外部のテキストファイルをAJAXで読み込みたいんですよね。そのファイルの選択の条件が書いてないんで、適当にやってます。

　↓のサンプルではクリックした<dt>のテキストからその<dd>用の外部のテキストファイルのurlを勝手に作ってます。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.5");</script>
<script type="text/javascript">
$(function(){

　$("dd:not(:first)").css("display","none")
　$("dt:first").addClass("selected");

　$("dl dt").click(function(){
　　 var url = "./" + $(this).text() + ".html";
　　 $("+dd",this).load(url,acordion($(this)));
　 }).mouseover(function(){$(this).addClass("over");
　 }).mouseout(function(){$(this).removeClass("over");
　});

　$("dt:first").click();

　function acordion(target){
　 if($("+dd",target).css("display")=="none"){
　　 $("dd").slideUp("slow");
　　 $("+dd",target).slideDown("slow");
　　 $("dt").removeClass("selected");
　　 target.addClass("selected");
　 }
　}

});
</script>

<dl>
<dt>Step.1</dt><dd></dd>
<dt>Step.2</dt><dd></dd>
<dt>Step.3</dt><dd></dd>
</dl>

./Step.1.htmlの中身はとりあえず、
<p>Lorem ...（中略）... venenatis.</p>

．．．．．．