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