題名と言いつつ、単に押したときやアニメーションや一部の動作をCSS3依存にしただけ。

アコーディオンのjQueryプラグインなんてとうの昔にブームは終わったというのに・・・我ながら、浅はかですね。

当然、IE6～8やネスケなどの古いブラウザとトランジションに対応していないIE9はお察しです。

 

とりあえずCSS3でスライド時の動作指定をしたいので、slideUp・slideDownの利用はなしで。

可変幅で行数が変わっても高さの調整を行う、という前提で。

 

jquery.cmthruster.jsで保存:

(function($){
	$.fn.cmThruster = function(options){
		var option = {
			section: '.section',
			trigger: '.trigger',
			behavior: '.behavior'
		};
		var cn = $.extend(option, options);
		var include = $(this);
 
		var fx = {
			section: 'thrust-section',
			trigger: 'thrust-trigger',
			behavior: 'thrust-behavior',
			check: 'thrust-check',
			measure: 'thrust-measure'
		};
 
		var core = (function(){
			return{
				init: function(){
					include.append('<style>.thrust-behavior{height:0;overflow:hidden;}</style>');
					include.children(cn.section).each(function(i){
						$(this).prepend('<input type="checkbox" class="' + fx.check + '" style="display:none;">');
						$(this).addClass(fx.section);
						$(this).children(cn.trigger).addClass(fx.trigger);
						$(this).children(cn.behavior).addClass(fx.behavior);
						$(this).children('.' + fx.behavior).wrapInner('<div class="' + fx.measure + '"></div>');
					});
				},
				change: function(arg){
					var d = {
						base: arg.parent('.' + fx.section),
						target: arg.parent('.' + fx.section).children('.' + fx.behavior),
						check: arg.parent('.' + fx.section).children('.' + fx.check),
						duration: '0.0s'
					};
					try{
						d.duration = arg.parent('.' + fx.section).children('.' + fx.behavior).css('transitionDuration');
						d.duration = Number( d.duration.substr(0, d.duration.indexOf('s')) ); 
					}catch(e){
						d.duration = '0.0s';
						d.duration = Number( d.duration.substr(0, d.duration.indexOf('s')) ); 
					}
					if(!d.check.prop('checked')){
						d.target.css({'height': (d.target.children('.' + fx.measure).outerHeight())});
						var set = setTimeout(function(){
							d.check.prop('checked', true);
						}, d.duration * 1000);
					}else{
						d.target.css({'height': 0});
						d.check.prop('checked', false);
					}
				},
				flex: function(){
					include.children(cn.section).each(function(i){
						var d = {
							base: $(this),
							target: $(this).children('.' + fx.behavior),
							check: $(this).children('.' + fx.check)
						};
						if(d.check.prop('checked')){
							d.target.css({'height': (d.target.children('.' + fx.measure).outerHeight())});
						}
					});
				}
			};
		})();
		core.init();
 
		include.children('.' + fx.section).children('.' + fx.trigger).click(function(){
			core.change($(this));
		});
		$(window).bind('resize',function(){
			core.flex();
		});
 
		return(this);
	};
})(jQuery);

 

HTML側:

<div class="thrust">
	<div class="entry">
		<h3 class="button">Q.斜陽の冒頭は？</h3>
		<div class="detail">
			<p>A.</p>
			<p>朝、食堂でスウプを一さじ、すっと吸ってお母さまが、</p>
			<p>「あ」</p>
			<p>と幽かすかな叫び声をお挙げになった。</p>
			<p>「髪の毛？」</p>
			<p>スウプに何か、イヤなものでも入っていたのかしら、と思った。</p>
			<p>「いいえ」</p>
			<p>お母さまは、何事も無かったように、またひらりと一さじ、スウプをお口に流し込み、すましてお顔を横に向け、お勝手の窓の、満開の山桜に視線を送り、そうしてお顔を横に向けたまま、またひらりと一さじ、スウプを小さなお唇のあいだに滑り込ませた。</p>
		</div>
	</div>
	<div class="entry">
		<h3 class="button">Q.銀河鉄道の夜の冒頭は？</h3>
		<div class="detail">
			<p>A.</p>
			<p>「ではみなさんは、そういうふうに川だと云いわれたり、乳の流れたあとだと云われたりしていたこのぼんやりと白いものがほんとうは何かご承知ですか。」先生は、黒板に吊つるした大きな黒い星座の図の、上から下へ白くけぶった銀河帯のようなところを指さしながら、みんなに問といをかけました。</p>
			<p>カムパネルラが手をあげました。それから四五人手をあげました。ジョバンニも手をあげようとして、急いでそのままやめました。たしかにあれがみんな星だと、いつか雑誌で読んだのでしたが、このごろはジョバンニはまるで毎日教室でもねむく、本を読むひまも読む本もないので、なんだかどんなこともよくわからないという気持ちがするのでした。</p>
		</div>
	</div>
	<div class="entry">
		<h3 class="button">Q.吾輩は猫であるの冒頭は？</h3>
		<div class="detail">
			<p>A.</p>
			<p>吾輩は猫である。名前はまだ無い。</p>
			<p>どこで生れたか頓と見當がつかぬ。何でも薄暗いじめじめした所でニヤーニヤー泣いて居た事丈は記憶して居る。吾輩はこゝで始めて人間といふものを見た。然もあとで聞くとそれは書生といふ人間中で一番獰悪な種族であつたさうだ。此書生といふのは時々我々を捕へて煮て食ふといふ話である。然し其當時は何といふ考もなかつたから別段恐しいとも思はなかつた。但彼の掌に載せられてスーと持ち上げられた時何だかフハフハした感じが有つた許りである。</p>
		</div>
	</div>
</div>

 

動作の指定:

<script>
$(document).ready(function(){
	$('.thrust').cmThruster({
		section :'.entry',  // 項目ごとの大枠
		trigger :'.button',   // ボタン的な役割を持たせる要素
		behavior :'.detail' // 実際に開閉させる要素
	});
});
</script>

 

スタイル:

<style>
/* トランジションの指定 */
.thrust .detail{
	transition:0.5s ease;
	-moz-transition:0.5s ease;
	-webkit-transition:0.5s ease;
	-o-transition:0.5s ease;
	-ms-transition:0.5s ease;
	opacity:0.0;
}
.thrust :checked + .button + .detail{
	opacity:1.0;
}
/* ミテクレのCSSは適当に */
.thrust{
	padding:0.5em 0.5em 0.01% 0.5em;
	border:solid #CCC 2px;
	border-radius:4px;
}
.thrust .detail{
	padding:0 0.5em;
	margin-bottom:0.5em;
}
.thrust .button{
	padding:0 0.5em;
	position:relative;
	z-index:1;
	background:#F6F6F6;
	border-radius:4px;
	cursor:pointer;
	font-weight:normal;
}
.thrust .button:after{
	content:"▼";
	padding:0.25em 0;
	width:4.8em;
	display:block;
	text-align:center;
	position:absolute;
	top:0.5em;
	right:0.5em;
	z-index:10;
	background:#EFEFEF;
	color:#CCC;
	font-size:0.5em;
	line-height:2.0em;
	border-radius:4px;
}
.thrust :checked + .button:after{
	content:"▲";
}
</style>

 

いろいろためしてもうちょっと改造の余地があるのでとりあえずここまで。