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

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

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

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

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

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

アコーディオン部分

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

参考サイト

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

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