dtタグをクリックすると隣接するddタグをスライドして開閉する方法(jQuery利用)+α

放置していたサイトをリニューアルしようとjQueryを勉強しています(プロバイダのサーバーで運用してたんですが、容量も少ないし、CGI動かすとなると別ドメインになるしとあまりよくないので、ここのドメインのサブドメインにして移転しようと思っています)。

というわけで今回はjQueryについて。用語や名前を意味するdtタグをクリックすると、その下のddタグを開閉させる方法についてです。まず、最初にページを開いた時にはddタグは閉じているものとします。

$(function() {
	$('dd').css("display", "none");
	$('dt').click(function() {
		$('+dd', this).slideToggle('slow');
	});
});

<dl>
<dt style="cursor:pointer">春</dt>
<dd>冬の次の季節</dd>
<dt style="cursor:pointer">夏</dt>
<dd>春の次の季節</dd>
<dt style="cursor:pointer">秋</dt>
<dd>夏の次の季節</dd>
<dt style="cursor:pointer">冬</dt>
<dd>秋の次の季節</dd>
</dl>

実行例

春

冬の次の季節

夏

春の次の季節

秋

夏の次の季節

冬

秋の次の季節

終わり。

としたいところですが、これだけでは何なのでもう少し改良してみます。
　URIにアンカー(ハッシュ)があると、ページを開いた時にアンカーに対応するdtタグの下のddタグを開くというものです。

$(function() {
	$('dd').css("display", "none");
	$('dt').click(function() {
		$('+dd', this).slideToggle('slow');
	});
	$(location.hash).click();
});

<dl>
<dt id="migite" style="cursor:pointer">右手</dt>
<dd>お箸を持つ方の手</dd>
<dt id="hidarite" style="cursor:pointer">左手</dt>
<dd>お箸を持たない方の手</dd>
</dl>

実行例

右手

お箸を持つ方の手

左手

お箸を持たない方の手

右手
多分これでうまくいくはず。

なぜかここでやったら、dtタグじゃなくて、ddタグのほうにページが遷移しました。なんでだろう・・・。