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行でいくらでもかけるので，シンプルさを求めるなら大変便利ですね~．

うめすこんぶ

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

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

javascriptのソース

説明

htmlソース

cssのソース (accordion.css)