ポンコツ.log

ひよっこエンジニアのちょっとしたメモ。主に備忘録。たまに雑記。

【jQuery】animateでアコーディオン

フロントは苦手です。

アコーディオンの実装なら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})

scrollHeightoverflow 部分を含めた高さを取得し、その値を 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でできる方法もあるのかもしれない…)