アコーディンパネルの別ページからのリンクについて

質問

こんばんは。
jqueryを使ってアコーディオンパネルを実装したページを作成しました。
通常は全て閉じた状態ですが、
全てのページにパネル１～5へのリンクがあり、それをクリックすると該当のパネルが開いた状態で表示させるには、どんなスクリプトを追加するとよろしいのでしょうか？

以下コードです。

--html（各ページのリンクの部分）
<ul>
<li><a href="/service/#panel01">パネル１へ</a></li>
<li><a href="/service/#panel02">パネル２へ</a></li>
・・・
</ul>

--html（アコーディオンパネルの部分 /service/index.html ）
<h5 class="trigger" id="panel01"><a href="#">パネル1のタイトル</a></h5>
<div class="accblock">
<p>パネル１のコンテンツ</p>
</div>
<h5 class="trigger"　id="panel02"><a href="#">パネル2のタイトル</a></h5>
<div class="accblock">
<p>パネル2のコンテンツ</p>
</div>
（省略）

---js
$(document).ready(function(){
$(".accblock").hide();
$("h5.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("slow");
});
});

location　href　か hash　を使うのかなと思っているのですが
うまく使いこなすことができませんでした。
アドバイスをいただけたら助かります。

どうぞよろしくお願いいたします。

回答No.1

fujillin · ベストアンサー

location.hashがそのままid指定になっていますので、パネルを一旦閉じたあとで該当パネルだけを表示するようにしてあげればよいのではないでしょうか？

$(location.hash).show();
みたいに。

hash値に何を指定されてくるかわからないので、事前に値をチェックするか、パネル内に限定できるように（HTMLソースがどうなったいるのか不明ですが）
"#○○○ div" + location.hash
などとしておく方が安全かも。

お礼

ありがとうございます。
参考にさせていただき、
$(location.hash).next(".accblock").slideToggle("slow,");
を追加することにより、できました。
本当にありがとうございます。
助かりました！