【旧刊】WordPressテーマ制作のみを取り扱った別冊電子書籍がAmazon Unlimitedでお楽しみ頂けます!!
Amazon Unlimited内で 田中勇輔 で検索してください。

☓ 閉じる

12Nov2011

超簡単に開閉式リストができるjQueryライブラリ

先月依頼されて作成したwebサイトがあるのですが、クライアントから「リストを開閉式にしたい」という要望を頂きました。

「はーい。やっときますね^^」 と軽い感じで返事して気づく。

・・・開閉式リスト作ったことないっ!!

そのサイトにはすでにjQueryを使っていたので、慌ててアコーディオンリストのjQueryを調べる事数十分。。。

今回ご紹介するライブラリ(というかjqueryスクリプト)は、ものすごいシンプルな上に、ものすごい良い感じの動きをして、ものすごい汎用性が高い!!

是非チェックしてみてください^^

Simple Toggle with CSS & jQuery

以下が制作者のサイトです。
(2011.12.07現在作者サイトは閉鎖されています)

超簡単に開閉式リストができるjQueryライブラリ Simple Toggle with CSS & jQuery

Demo | Site

今回紹介するコレは外部ファイルを使用しない、jQuery自体のスクリプトです。

外部ファイルを準備する必要はありませんがjQueryは使いますので、
準備しておいて下さい\(-o-)/

1. こちらの公式jQueryをコピーして、サーバーに設置 (例:/js/jquery.js に保存
2. <head>内で呼び出します。
例:

ステップ1:ヘッダ内の記述

<head>内に以下のコードを設置します。

<script type="text/javascript">
	$(document).ready(function(){
	
		//Hide (Collapse) the toggle containers on load
		$(".toggle_container").hide(); 
	
		//Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
		$("h2.trigger").click(function(){
			$(this).toggleClass("active").next().slideToggle("slow");
			return false; //Prevent the browser jump to the link anchor
		});
	
	});
</script>

※後述の「トリガー」をh2タグ以外に設定する場合、コード内のh2.triggerの記述を変更する必要があります。
詳しくは後ほど。

ステップ2:トリガーとコンテナーの記述

トリガーとコンテナーにクラスを設定します。

トリガーをクリックしたらコンテナーが開閉する という関係です。

h2タグとpタグで例を作成してみます。

<h2>メニュー</h2>
 <div>
  <p>― 麺類</p>
  <p>― ご飯類</p>
 </div>
<h2>会社概要</h2>

ここではトリガーは「<h2>メニュー</h2>」、 コンテナーは「<div> ~~ </div>」です。

トリガーには trigger 、 コンテナーには toggle_container というクラスを指定します。

<h2 class="trigger">メニュー</h2>
 <div class="toggle_container">
  <p>― 麺類</p>
  <p>― ご飯類</p>
 </div>
<h2>会社概要</h2>

この2ステップで完成です。

既存のリストをアコーディオン化する場合は、このクラス指定だけで充分動きますが1点だけ注意。

先ほども触れましたが、トリガーをh2以外にする場合はhead内に設置したコードを変更する必要があります。

上から6行目のコード

$("h2.trigger").click(function(){

のh2の部分を、実際にトリガーに使用したタグに変更して下さい。
h1タグを使う場合はh1に。 liタグを使う場合はliに。

ちょっとカスタマイズ

head内に記述するコードから、以下の行を削除します。

//Hide (Collapse) the toggle containers on load
$(".toggle_container").hide(); 

そうすると、開いた状態が初期値になります。

使用例

このライブラリの利点は、既存のリストにほとんど手を加えずに開閉式にできるという点です。

今回のように「既存のwebサイトのメニューを可動式にして」という依頼にピッタリでした!

ちなみに今回作成した実例は以下のサイトになります。
366candles.com

知り合いの知り合いの・・・僕は直接お会いした事がないキャンドルアーティストさんのサイトです(;・∀・)

展示会に出展される、という事で急ぎの依頼だったのでcoming soonなコンテンツが多いですが、
今後も制作を依頼されたらいろいろと新技術の実験台に使わせて頂きます 笑

関連記事