読者です 読者をやめる 読者になる 読者になる

うめすこんぶ

日々のプログラミングで残しておきたいメモ.何かの役に立てれば幸いです.

jQueryでたった5行で書くアコーディオンパネル

スポンサーリンク

なんだかんだで,jQueryを使えばカッコイイアコーディオンパネルが5行のjavascriptで作れます.

スマートフォンにも使える、クリックで開くアコーディオンメニューjQuery - ホームページ制作やリニューアル印刷物デザインなら大阪のWPC ↑のページを参考にアコーディオンパネルを作ってみました.

実際作ったやつです.画像ですが…

f:id:konbu13:20140206224927j:plain

その手順を説明します.簡単ですよ.

javascriptのソース

$(function() {
  $(".accordion dt").click(function(){
    $(this).next("dd").slideToggle().siblings("dd").slideUp();
  });
});

これをaccordion.jsと名づけてファイルに保存します.

説明

$(".accordion dt").click(function(){
  //クリック時の処理
})

この部分で,「accordionクラスであるdt要素」,つまり表示されているパネルのどれかクリックすると,内部の処理が発動する用になってます.

これがメインの処理部分です.

    $(this).next("dd").slideToggle().siblings("dd").slideUp();

順に読んでいくと,$(this).next("dd")はクリックされた要素(=this)の次のdd要素. そいつに,slideToggle()によってスライドさせます. dd要素は最初は隠されている要素です.ですのでクリック後はスライドしながら出現します. さらに,.siblings("dd")でクリックされたdd要素以外のdd要素全てに対して,.slideUp(); により強制的にスライドしながら消える処理を実行しました.

一行なのでわかりにくいですが,分解するとこうなります.

    var d = $(this).next("dd"); //クリックされた要素の次のdd要素.
    d.slideToggle() //dをスライド
    d.siblings("dd").slideUp(); //d以外のdd要素全てをスライドさせつつ消す

htmlソース

<html>
  <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="accordion.js"></script>
    <link rel="stylesheet" href="accordion.css" type="text/css">
  </head>
  <body>
    <dl class="accordion">
      <dt>panel1</dt>
      <dd>
    <p>text</p>
      </dd>
      <dt>panel2</dt>
      <dd>
    <p>text</p>
      </dd>
      <dt>panel3</dt>
      <dd>
    <p>text</p>
      </dd>
    </dl>
  </body>
</html>

htmlのソース中は,一応スタイルシートaccordion.cssも入れてます.これは次に説明します.

cssのソース (accordion.css)

* {
    margin:0;
    padding:0;
}

dl.accordion {
    background:#4af;
    border: #4af 5px solid;
    border-radius:3px;
    width:300px;
    margin:0 auto 30px;
    /* padding: 8px; */
    font-size:16px;
}

dl.accordion dt {
    background:#4af;
    height:40px; 
    color: #eee;
    text-align: center;
    line-height:1.5;
    cursor:pointer;
}

dl.accordion dd { 
    background:#FFF;
    padding:10px;
    line-height:1.5;
    display:none;         /* 初期化時は消しておく */
}

注意するのは,dd要素のスタイルで,display:none;を含めることで,最初は見えないようにしておくことです.これ以外は別にこだわらなくてもよし.

以上で終わりです.jQueryはやろうと思えば1行でいくらでもかけるので,シンプルさを求めるなら大変便利ですね~.