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

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

2015.10.11

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

1 1. アコーディオンパネルを実装するHTMLソース
2 2. アコーディオンパネルを実装するjQuery
3 応用：アコーディオンに矢印を表示させる

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

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

1<dl>
2   <dt>テキスト</dt>
3      <dd>本文本文本文本文本文本文本文本文本文本文</dd>
4</dl>

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

1dl {
2   width: 300px;
3}
4 
5dt {
6   border: 1px solid #ccc;
7   padding: 10px;
8}
9 
10dd {
11   border: 1px solid #ccc;
12   border-top: 0;
13   margin: 0;
14   padding: 10px;
15}

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

テキスト: 本文本文本文本文本文本文本文本文本文本文

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

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

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

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

テキスト: 本文本文本文本文本文本文本文本文本文本文

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

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

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

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

テキスト: 本文本文本文本文本文本文本文本文本文本文

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

1<script>
2$(function(){
3$('dd').hide();
4$('dt').click(function(){
5    $(this).toggleClass("ac");
6    $(this).next("dd").slideToggle();
7    });
8});
9</script>

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

1dt {
2   position: relative;
3}
4 
5dt:after {
6   content: "";
7   position: absolute;
8   border-right: 1px solid #000;
9   border-bottom: 1px solid #000;
10   width: 10px;
11   right: 10px;
12   height: 10px;
13   transform: rotate(45deg);
14}
15 
16dt.ac:after {
17   content: "";
18   position: absolute;
19   border-left: 1px solid #000;
20   border-top: 1px solid #000;
21   border-right: 0;
22   border-bottom: 0;
23   width: 10px;
24   right: 10px;
25   height: 10px;
26   transform: rotate(45deg);
27}

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

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