【jQuery】簡単！jQueryでアコーディオンパネルを実装する方法

　当サイトでもPROFILEのページでも実装しているアコーディオンパネル。サイトに動きをつける！となった時に比較的簡単に実装できるものとしてアコーディオンパネルがありますが、今回はアコーディオンパネルについて解説したいと思います！

1. アコーディオンパネルを実装するHTMLソース

　まず、今回は以下のようにソースを設定したとします。

<dl>
   <dt>テキスト</dt>
      <dd>本文本文本文本文本文本文本文本文本文本文</dd>
</dl>

こちらに以下のようにCSSを設定して形を整えます。

dl {
   width: 300px;
}

dt {
   border: 1px solid #ccc;
   padding: 10px;
}

dd {
   border: 1px solid #ccc;
   border-top: 0;
   margin: 0;
   padding: 10px;
}

このように設定することで、以下のようにデザインが適用されます。

2. アコーディオンパネルを実装するjQuery

　それでは、いよいよアコーディオンパネルを実装するjQueryを記述していきます！そのコードは以下になります。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
$(function(){
   $('dd').hide(); //デフォルトではddを隠す
   $('dt').click(function(){ //dtをクリックした時
      $(this).next("dd").slideToggle(); //隠れてたddをスライドして表示させる
   });
});
</script>

このコードを記述することで

上のようにアコーディオンパネルを実装することができます！

応用：アコーディオンに矢印を表示させる

　続いて応用として、当サイトのPROFILEページのアコーディオンでも表示しているように、アコーディオンの見出しをクリックするまでは下矢印を表示させて、見出しをクリックしてアコーディオン部分が展開した時には上矢印を表示させる…みたいなこともできるとデザインとしてわかりやすいと思います。

　例えば以下のようにデザインを設定したとします。

このように設定するには、dtをクリックした時にtoggleclassでクラスを追加し、CSSでデザインを設定する必要があります。
それには以下のようにjQueryを記述してあげます。

<script>
$(function(){
$('dd').hide();
$('dt').click(function(){
    $(this).toggleClass("ac");
    $(this).next("dd").slideToggle();
    });
});
</script>

このようにjQueryを記述することで、dtをクリックした時にdtにclass: acを追加／削除させることができるようになります。
そして、CSSを以下のように記述して矢印を表示させるようにします。

dt {
   position: relative;
}

dt:after {
   content: "";
   position: absolute;
   border-right: 1px solid #000;
   border-bottom: 1px solid #000;
   width: 10px;
   right: 10px;
   height: 10px;
   transform: rotate(45deg);
}

dt.ac:after {
   content: "";
   position: absolute;
   border-left: 1px solid #000;
   border-top: 1px solid #000;
   border-right: 0;
   border-bottom: 0;
   width: 10px;
   right: 10px;
   height: 10px;
   transform: rotate(45deg);
}

　このようにjQueryおよびCSSを記述してあげることでよりデザインの凝ったアコーディオンパネルを実装できるようになると思いますので、是非ご活用ください(*^-^)