フロントは苦手です。
アコーディオンの実装ならslideToggle
となるのですが、一部だけ残して下の部分が展開するタイプのアコーディオン（そもそもアコーディオンと言うのかも怪しい…）を実装しようとすると、 slideToggle だと「一部を残す」ができなかったので、animateでアコーディオンっぽい動きを作りました。
See the Pen accordion by s-mori (@s-mori) on CodePen.
slideToggle([speed], [callback]) - jQuery 日本語リファレンス
animate(params, options) - jQuery 日本語リファレンス
scrollHeightで展開時の高さを指定
resizeHeight = target.get(0).scrollHeight
target.animate({"height": resizeHeight})
scrollHeight で overflow 部分を含めた高さを取得し、その値を height で指定しています。
target.animate({"height": "100%"}) としても展開はされるのですが、この場合 animate が効かなくなります。
.scrollHeight | JavaScript 日本語リファレンス | js STUDIO
data属性を利用して元の高さに畳む
target.attr('data-org-height', target.innerHeight())
展開する前に、元の高さを取得して、 data属性を利用して保持させます。
orgHeight = target.attr('data-org-height');
target.animate({"height": orgHeight});
畳む時は、 data属性として持たせていた高さを取得し、 animate に渡します。
元の高さ（上記penの場合だと60px）を指定しても問題はないのですが、SP等で高さが変わるときにブラウザ判定を入れたくなかったので、悩んだ挙句、data属性を利用しています。
data便利ですぐ使ってしまう…。
（slideToggleでできる方法もあるのかもしれない…）
