当サイトでも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を記述してあげることでよりデザインの凝ったアコーディオンパネルを実装できるようになると思いますので、是非ご活用ください(*^-^)

スポンサーリンク