jQueryを使用したよくあるアコーディオンの質問です。


[HTML]

<div id="main">

<h3 id="100" class="trigger">アコーディオン1</h3>
<dl>
<dt>hoge</dt>
<dd>hogehoge</dd>
</dl>

<h3 id="200" class="trigger">アコーディオン2</h3>
<dl>
<dt>hoge</dt>
<dd>hogehoge</dd>
</dl>

<h3 id="300" class="trigger">アコーディオン3</h3>
<dl>
<dt>hoge</dt>
<dd>hogehoge</dd>
</dl>

</div>


<div id="side">

<ul>
<li id="100">アコーディオン1</li>
<li id="200">アコーディオン2</li>
<li id="300">アコーディオン3</li>
</ul>

</div>


問題となっているのがアコーディオン開閉のトリガーとなる部分が
「div#main h3」と「div#side ul li」の2箇所存在する所です。

mainのh3とsideのliには共通のidが振られており、
例えば「div#side ul li#100」がクリックされた場合、
「div#main h3#100」を開くようにしたいと考えています。

サンプルや参考URLなど教えてもらえると非常に助かります。

回答の条件
  • 1人10回まで
  • 13歳以上
  • 登録:2011/04/08 13:36:55
  • 終了:2011/04/08 18:29:55

回答(2件)

id:TransFreeBSD No.1

TransFreeBSD回答回数668ベストアンサー獲得回数2682011/04/08 15:33:33

ポイント50pt

idは文章内でユニークである必要があり、二つの要素に同じidを付けることはできません。

ですので、h3要素は"h3_*"、li要素は"li_*"とする前提で話を進めさせていただきます。

jQueryの場合、要素のイベントは簡単に実行でき、クリックならclick()メソッドを呼べばOKです。

具体的には

$.each(["100", "200", "300"], function(){
   var elem = $("#h3_"+this);
   $("#li_"+this).click(function(){elem.click()});
});

となると思います。

あとは.mainでアコーディオンを仕込むだけです。

id:ktmthrk

ありがとうございます。参考になります。

ちなみに"100","200","300"の部分ですがCMSで"400","500"・・・と

どんどん追加されていくものとした場合はどうすればいいでしょうか?

2011/04/08 16:02:42
id:Cherenkov No.2

Cherenkov回答回数1503ベストアンサー獲得回数4932011/04/08 18:00:22

ポイント50pt

コメント欄を有効にしたほうが有益です。


>よくあるアコーディオン

>どんどん追加されていく

の意味がわかりませんが適当に書いてみました。

以下のようにすればidが重複していても大丈夫だと思います。

id重複は欠陥であることを理解してください。


demo: http://jsfiddle.net/BRwX6/


<html>
  <head>
    <style type="text/css">
        #main > dl {
          display: none;
        }
        #side {
          border: 1px solid black;
        }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
          $('#main .trigger').click(function() {
            $(this).find('+dl').toggle();
          });
        
          $('#side li').click(function() {
            $('#main #' + this.id).click();
          });
        });
    </script>
  </head>
  <body>
    <div id="main">
      <h3 class="trigger" id="100">アコーディオン1</h3>
      <dl>
        <dt>hoge</dt>
        <dd>hogehoge</dd>
      </dl>
      <h3 class="trigger" id="200">アコーディオン2</h3>
      <dl>
        <dt>hoge</dt>
        <dd>hogehoge</dd>
      </dl>
      <h3 class="trigger" id="300">アコーディオン3</h3>
      <dl>
        <dt>hoge</dt>
        <dd>hogehoge</dd>
      </dl>
    </div>
    <div id="side">
      <ul>
        <li id="100">アコーディオン1</li>
        <li id="200">アコーディオン2</li>
        <li id="300">アコーディオン3</li>
      </ul>
    </div>
  </body>
</html>
id:ktmthrk

ありがとうございます。

まさに欲しかったサンプルです。助かりました。

2011/04/08 18:29:02

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません