一定以上縦幅がある時アコーディオンする

一定以上要素がある時にアコーディオンボタンを出現させ、
一定に満たない場合はアコーディオンボタンを出しません。

See the Pen 180407_アコーディオン by nekuta (@nekuta) on CodePen.

アコーディオン用のdivを作る

	var box = $('.box');
	//.boxの下に.moreを作る
	box.after('<div class="more">MORE</div>');
	var more = $('.more');
	
//中略
	
	//forで.box-innerの高さを取得、縦幅が180pxより小さい場合.moreをhideする
	//box.lengthで.boxの数分だけ回す
	for(var i=0;i<box.length;i++){
		//.eq(i)でインデックス番号でフィルタリング
		var boxInnerH = $('.box-inner').eq(i).innerHeight();
		if(boxInnerH<180){
			more.eq(i).hide();
		}else{
			box.eq(i).css({
				height:'180px'
			});
		}
	}

.boxの下にアコーディオン用のdivをそれぞれ作成します。
要素の下に挿入するメソッドは.after()

forで.boxの分だけ回します。
それぞれの.box-innerのpaddigを含む高さを見て、180pxより小さければ対応する.moreを非表示にする。180以上だった場合、.boxにheight:’180px’を効かせる。※.boxにはあらかじめcssでoverflow:hiddenがかかっているので、はみ出した要素を隠すことができます

アコーディオン部分

	function remClass(){
		$(this).next(more).removeClass('is-active');
	}
	function adClass(){
		$(this).next(more).addClass('is-active');
	}

//中略

	more.on('click',function(){

		//複数あった時を考慮
		//クリックした.moreに対応する.box-innerの高さを取得する
		//more.index(this)でindex番号を出す
		var index = more.index(this);
		var boxThis = box.eq(index);
		var innerH = $('.box-inner').eq(index).innerHeight();

		if($(this).hasClass('is-active')){
			//.is-activeがある場合(アコーディオンが開いているとき)
			boxThis.animate({
				height:'180px'
			},200,remClass);
		}else{
			//ない場合(アコーディオンが閉じているとき)
			boxThis.animate({
				height:innerH
			},200,adClass);
		}
	});

.moreがクリックされたら、”is-active”というクラスがあるかどうかで処理を分けます。
アニメーションした後にクラスをつけるか消すかしています。

参考サイト

.animate() | jQuery 1.9 日本語リファレンス | js STUDIO

  • コーダーのための計算機