OKWAVEのAI「あい」が美容・健康の悩みに最適な回答をご提案!
-PR-
解決
済み

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

  • すぐに回答を!
  • 質問No.6962820
  • 閲覧数2623
  • ありがとう数2
  • 気になる数0
  • 回答数1
  • コメント数0

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

以下コードです。

--html(各ページのリンクの部分)
<ul>
<li><a href="/service/#panel01">パネル1へ</a></li>
<li><a href="/service/#panel02">パネル2へ</a></li>
・・・
</ul>

--html(アコーディオンパネルの部分 /service/index.html )
<h5 class="trigger" id="panel01"><a href="#">パネル1のタイトル</a></h5>
<div class="accblock">
<p>パネル1のコンテンツ</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 を使うのかなと思っているのですが
うまく使いこなすことができませんでした。
アドバイスをいただけたら助かります。

どうぞよろしくお願いいたします。
通報する
  • 回答数1
  • 気になる
    質問をブックマークします。
    マイページでまとめて確認できます。

質問者が選んだベストアンサー

  • 回答No.1
レベル14

ベストアンサー率 61% (1594/2576)

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

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

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

ありがとうございます。
参考にさせていただき、
$(location.hash).next(".accblock").slideToggle("slow,");
を追加することにより、できました。
本当にありがとうございます。
助かりました!
投稿日時 - 2011-08-24 12:44:18
-PR-
-PR-
このQ&Aのテーマ
このQ&Aで解決しましたか?
関連するQ&A
-PR-
-PR-
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-
-PR-
-PR-

特集


いま みんなが気になるQ&A

関連するQ&A

-PR-

ピックアップ

-PR-
ページ先頭へ