設置方法や設定

表示する

使いたいHTMLファイルのhead要素内でjavascriptを読み込みます。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.4");</script>

<script type="text/javascript" src="./js/jquery.switchHat.js"></script>

特に設定を変えない場合、開閉用のボタンにクラスswitchHatを付け、初期状態は非表示にしたい要素にクラスswitchDetailを付けます。example02 が初期状態のままのサンプルです。

<p><span class="switchHat">表示する</span></p>

<div class="switchDetail">
<p>ここが中身。</p>
</div>

このページのサンプル用の設定は以下のようになってます。

$(function(){
	$.uHat.switchHat({
		switchBtn: '.switchHat, dl.faq dt',
		switchContents: '.switchDetail, .switchDetail2, dl.faq dd'
	});
	$.uHat.close({
		closeBtnSet: '.switchDetail'
	});
	$.uHat.openAll();
});

example01

閉じてるのが問答無用で全部開きます。もっかい押すと全部閉じます。

全てを開く!

<p>
<span class="allOpenBtn">全てを開く!</span>
</p>

もうちょい表示する

特定の部分だけ 全てを開くようにするには、下記のように特定の要素を指定します。

$(function(){
	$.uHat.switchHat();
	$.uHat.close();
	$.uHat.openAll({
		switchBtn: dl.faq dt,
		openContents: 'dl.faq dd'
	});
});

example02

基本的な感じ。特に何の変更もしなかった場合。

表示する

<p><span class="switchHat">表示する</span></p>

<div class="switchDetail">
<p>ここが中身。</p>
</div>

中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。

中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。

中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。

example03

X close ボタンが表示されないバージョン。

表示する

<p><span class="switchHat">表示する</span></p>

<div class="switchDetail2">
<p>ここが中身。</p>
</div>

基本的には、$.uHat.close();をコメントにしてもらえればOK。

$(function(){
	$.uHat.switchHat();
	//$.uHat.close();
	$.uHat.openAll();
});

サンプルのように特定の部分だけ X close ボタン を表示するには、下記のようにcloseBtnSetに特定の要素を指定します。

$(function(){
	$.uHat.switchHat();
	$.uHat.close({
		closeBtnSet: '.switchDetail'
	});
	$.uHat.openAll();
});

中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。

中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。

中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。中身中身。

example04

よくある質問とかに使えそうな感じ。

Q.1
回答が入っていると思います。回答が入っていると思います。回答が入っていると思います。回答が入っていると思います。回答が入っていると思います。回答が入っていると思います。
Q.2
回答が入っていると思います。回答が入っていると思います。回答が入っていると思います。回答が入っていると思います。回答が入っていると思います。回答が入っていると思います。回答が入っていると思います。回答が入っていると思います。回答が入っていると思います。回答が入っていると思います。回答が入っていると思います。回答が入っていると思います。回答が入っていると思います。回答が入っていると思います。回答が入っていると思います。
Q.3
回答が入っていると思います。回答が入っていると思います。回答が入っていると思います。回答が入っていると思います。回答が入っていると思います。回答が入っていると思います。
Q.4
回答が入っていると思います。回答が入っていると思います。回答が入っていると思います。回答が入っていると思います。回答が入っていると思います。回答が入っていると思います。
Q.5
回答が入っていると思います。回答が入っていると思います。回答が入っていると思います。回答が入っていると思います。回答が入っていると思います。回答が入っていると思います。回答が入っていると思います。
<dl class="faq">
<dt>Q.1</dt>
<dd>回答が...</dd>
<dt>Q.2</dt>
<dd>回答が...</dd>
</dl>

$.uHat.switchHatに下記のような感じで指定すればOKっす。$.uHat.close();をコメントにしない場合、dd要素内にcloseボタンが表示されます。

$(function(){
	$.uHat.switchHat({
		switchBtn: 'dl.faq dt',
		switchContents: 'dl.faq dd'
	});
	//$.uHat.close();
	$.uHat.openAll();
});

コード全部

表示する

/*
 + JQuery         : switchHat.js 0.10
 +
 + Author         : Takashi Hirasawa
 + Special Thanks : kotarok (http://nodot.jp/)
 + Copyright (c) 2010 CSS HappyLife (http://css-happylife.com/)
 + Licensed under the MIT License:
 + http://www.opensource.org/licenses/mit-license.php
 +
 + Since    : 2010-06-24
 + Modified : 2010-06-27
 */

(function($) {

	//設定(コメントアウトすれば機能停止)
	$(function(){
		$.uHat.switchHat();
		$.uHat.close();
		$.uHat.openAll();
	});

	$.uHat = {

		// 折りたたみ
		switchHat: function(settings) {
			uHatConA = $.extend({
				switchBtn: '.switchHat',
				switchContents: '.switchDetail',
				switchClickAddClass: 'nowOpen'
			}, settings);
			$(uHatConA.switchContents).hide();
			$(uHatConA.switchBtn).addClass("switchOn").click(function(){
				var index = $(uHatConA.switchBtn).index(this);
				$(uHatConA.switchContents).eq(index).slideToggle("slow");
				$(this).toggleClass(uHatConA.switchClickAddClass);
			}).css("cursor","pointer");
		},

		// 下の方に閉じるボタンを表示する
		close: function(settings) {
			uHatConB = $.extend({
				closeBtnSet: uHatConA.switchContents,
				apCloseBtn: '<span>X Close</span>'
			}, settings);
			$(uHatConB.closeBtnSet).append('<p class="closeBtnHat">'+uHatConB.apCloseBtn+'</p>');
			$(".closeBtnHat").children().click(function(){
				$(this).parents(uHatConA.switchContents).fadeOut("slow");
				$(this).parents().prev().contents(uHatConA.switchBtn).removeClass(uHatConA.switchClickAddClass);
			}).css("cursor","pointer");
		},

		// 全部開くボタン
		openAll: function(settings) {
			uHatConC = $.extend({
				openAllBtnClass: '.allOpenBtn',
				switchBtn: uHatConA.switchBtn,
				openContents: uHatConA.switchContents
			}, settings);
			$(uHatConC.openAllBtnClass).addClass("switchOn").toggle(
				function(){
					$(this).addClass(uHatConA.switchClickAddClass);
					$(uHatConC.openContents).slideDown("slow");
					$(uHatConC.switchBtn).addClass(uHatConA.switchClickAddClass);
				},
				function(){
					$(this).removeClass(uHatConA.switchClickAddClass);
					$(uHatConC.openContents).slideUp("slow");
					$(uHatConC.switchBtn).removeClass(uHatConA.switchClickAddClass);
				}
			).css("cursor","pointer");
		}

	};

})(jQuery);