.slidetoggle()で作ったアコーディオンがガタつく!?

むむ、アコーディオンがガタガタカックン・・・！？

アコーディオンがガタつく原因

.slidetoggle()で開閉させるアコーディオンが開閉時にガタつく。。。ということはありませんか?

アコーディオンの動きをなめらかにしようとtransitionを設定している場合、transition : all 0.3s;のように”all”指定すると、そもそものslidetoggleの動きと干渉して、動きがガタガタカックンになってしまいます。

対処法

そもそもslideToggleを引数なしでそのまま使うと400ミリ秒のアニメーションで開閉します。開閉スピードを調整したい場合は、.slideToggle()の引数に期間（ミリ秒）を設定する。

	$(function () {
		$(".js-accordion").click(function () {
			$(this).next("dd").slideToggle(700);
		});
	});

開閉する要素に他のアニメーションを付けている場合、スピードの調整はtransition:transform .3s;のようにプロパティを限定して指定すれば良さそうです！

MDN Web Docs

transition - CSS: カスケーディングスタイルシート | MDN transition は CSS のプロパティで、 transition-property、 transition-duration、 transition-timing-function、 transition-delay、 transition-behavior の一括指定プ...

slidetoggleだけでなく、.slideopenや.slideclose に対しても同様ということです！ご注意ください〜！