• このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加

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

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

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

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

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

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

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

【実装デモ】

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のコードだけ次のように書き換えます

<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>

おわりに

slideToggle(500), slideUp(500), slideDown(500)の()内の数字(ミリセカンド単位で表記)を変更することでパネルの開閉アニメーションの動作速度を変更することができます。数字が500の場合、0.5秒かけてアニメーションが動作するということです。HTML/CSS/Javascriptをカスタマイズして自分好みのデザイン・動きの開閉パネルを作成しましょう。

市川