latup熊本でホームページ制作をしている人のメモ

簡単なjQueryのアコーディオンサンプル

2009年 4月 28日 (火) / PM 11:17

ホームページ制作でタブやアコーディオンなどを設置する事があるのですが、そういうケースではjQueryが便利です。

色々と面白いプラグインが多数ありますが、意外と自分でタブ切替やアコーディオン処理をやろうと思うと難しいみたいで、まず簡単なアコーディオン処理のサンプルを作ってみました。

以下、サンプルの解説。

簡単に説明すると、左のアコーディオンが個別に開閉するパターン（sample_1）で、右のアコーディオンが開いているのは常に１つのパターン（sample_2）です。
全体は実際のサンプルページのHTMLソースを参考して下さい。

肝心のjQueryは以下の記述でGoogleからもらい、jQueryの処理は外部ファイルとしてまとめます。

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
	google.load("jquery","1.3.2");
	google.setOnLoadCallback(function() {});
</script>
<script type="text/javascript" src="js/jquery-accordion.js"></script>

jQueryの処理部分は以下のとおりです。

$(document).ready(function() {

	// text要素の初期状態をCSSで指定してしまうと、
	// jQueryに対応していないブラウザで問題となるので、

	// text要素のうち
	$(".text")
		// sample_1とsample_2内の一番最初のtext要素を除いて
		.not("#sample_1 .text:first, #sample_2 .text:first")
		// 非表示に。
		.hide();

	// sample_1のアコーディオン処理
	$("#sample_1 .name").click(function(){
		// クリックした次の要素をスライド動作
		$(this).next().slideToggle();
	});

	// sample_2のアコーディオン処理
	$("#sample_2 .name").click(function(){
		// sample_2内のtext要素のうちクリックした次の要素を除いてスライドアップ
		$("#sample_2 .text").not($(this).next()).slideUp();
		// クリックした次の要素をスライド動作
		$(this).next().slideToggle();
	});

	// 上のままだとマウスカーソルが変わらないのでリンクっぽくないので、
	// name要素にマウスオーバーしたら？
	$(".name").hover(function(){
		// マウスカーソルの形をリンクのものに偽装。
		$(this).css("cursor","pointer");
	},function(){
		// name要素からマウスが離れたら元に戻す。
		$(this).css("cursor","default");
	});

});

アコーディオン処理だけであれば13～17行目または19～25行目だけを1行目と37行目部分ではさんであげれば動作します。

他の3～11行目と27～35行目はアクセシビリティのアップのための処理です。

たったこれだけでOKなので上手く修正してあげれば既存のホームページにも組み込む事が可能なのですが、熊本の企業サイトでは正直見かけませんね。

タグ: jQuery