【jQuery】開閉可能なアコーディオンパネルを作ってみよう

1. 開閉可能なアコーディオンパネル

開閉可能なアコーディオンパネル

タイトルをクリックすることで本文が表示されたり閉じたりを切り替えることのパネルをJqueryを使って作成することができます。様々なサイトで定番として利用されることが多いですが、画面領域が限られたスマートフォン上で複数のコンテンツを効率よく表示させたいといった場合にこそ威力を発揮する実装となります。

扱うコード量も比較的少なく簡単に実装できるので是非とも使っていただければなと思います。

jQueryとJavaScriptの関係

ちょっとその前に…jQueryとJavaScriptの関係とは何なのでしょうか？

JavaScriptはブラウザと直接やりとりしてWebページの見た目や内容を変える便利な言語です。

ところがJavaScriptには弱点があり、IE8以前のIEとそれ以外のブラウザで大きく挙動が異なることや、最新のブラウザでも動作が微妙に異なることなど、JavaScriptで記述しようと思うとそれなりにノウハウとテクニックが必要です。

そこで登場するのがjQueryです！ブラウザ同士の互換性も吸収してより簡単にスクリプトを記述できるようになっています。文法も比較的簡単で、プログラミングの経験がないWebデザイナーやマークアップエンジニアでも理解しやすいのが特徴です。

jQueryはUI/UXを向上させるために有効ですが、さらに便利なプラグインなども用意されているので合わせてご覧ください。
jQueryUIを使って便利で見栄えのよいUIを作ってみよう

例えば、

HTML

おはようございます

というHTMLドキュメントの内容を書き換えたい場合、

JavaScript

window.onload=function(){
	var element = document.getElementById("demo_text");
	//値の書き換え
	element.innerHTML = 'おはよう';
};

でも書き換えられますが、

jQUery

$(function(){
	$("#demo_text").html('こんにちは');
});

でも書き換えられます。

jQueryはJavaScriptをより簡単に使えるように開発されたライブラリなんですね。ちなみに、jQuery自身はJavaScriptで書かれています。それでは実際にスクリプトを記述して画面を操作してみましょう！

今回は下記の２パターンパネルを実装する方法をご案内します。

パターン①一度に複数のパネルを開いた状態にできる開閉パネル
パターン②アコーディオンパネル（ひとつのパネルを開いたら他のパネルは閉じるパネル）

一度に複数のパネルを開いた状態にできる開閉パネル

まずは複数のパネルを開いた状態にできる開閉パネルから。1つのパネルを開いた状態で、他のパネルを開いても開いた状態のパネルは閉じないようになっています。

※jQueryは、jQueryの公式サイトやGoogleのCDNサーバーへ直接リンクを貼る方法で読み込むことが可能です。
今回はGoogleのCDNサーバーを利用する方法で、ライブラリへのリンクを貼ります。

【実装デモ】

デモはこちら①

HTMLの実装




<dl id="panel">


<dt>HTML5とは</dt>
<dd>HTML5とは、HTMLのバージョン5、改訂第5版です。 現在、ウェブページを作成する際に一般的に利用されるのはHTML 4.01ですが、 次世代のウェブ環境に合わせて、新たに仕様を検討されているのがHTML5です。 今のHTML 4やXHTML1の目的は、HTMLタグで構造付けされたHTML文書を作成することです。</dd>
<dt>CSS3とは</dt>
<dd>CSS3とは、Webページなどの書式やレイアウトなどの見栄えを記述する言語の一つであるCSS（Cascading Style Sheet）の第3版。 Web関連技術の標準規格を策定するW3Cが2011年6月に最初の規格を勧告した</dd>
<dt>Javascriptとは</dt>
<dd>JavaScriptとは、主にWebページに組み込まれたプログラムをWebブラウザ上で実行するために用いられるプログラミング言語の一つ。</dd>
</dl>

CSSの実装

panel {
  width: 500px;
}

#panel > dt {
  border-bottom: solid 1px white;
  background-color: #00BCD4;
  color: white;
  cursor: pointer;
  padding: 10px;
  font-weight: bold;
}

#panel > dd {
  border: solid 1px Silver;
  margin: 0px;
  padding: 10px;
}

jQueryの実装

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
<script>
$(function() {
  //最初は全てのパネルを非表示に
  $('#panel > dd').hide();
  $('#panel > dt')
    .click(function(e){
 //選択したパネルを開く
      $('+dd', this).slideToggle(500);
    })
});
</script>

アコーディオンパネル

次に他のパネルを開くと、開いているパネルが閉じるよう実装してみます。

【実装デモ】

デモはこちら②

jQueryの実装（アコーディオンパネル）

htmlとcssの実装はパターン①と同じです。Jqueryのコードだけ次のように書き換えます

slideToggle(500), slideUp(500), slideDown(500)の（）内の数字（ミリセカンド単位で表記）を変更することでパネルの開閉アニメーションの動作速度を変更することができます。数字が500の場合、0.5秒かけてアニメーションが動作するということです。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
<script>
$(function() {
  //1枚目のパネルを除いて非表示にする
  $('#panel > dd:gt(0)').hide();
  $('#panel > dt')
    .click(function(e){
      //すべてのパネルを閉じる。
      $('#panel > dd').slideUp(500);
      //選択したパネルのみ表示する
      $('+dd', this).slideDown(500);
    })
});
</script>