jQuery不要のシンプルなjavascriptアコーディオンリスト

最終更新日


CSSのみでアコーディオンリスト2パターンではCSSのみで高さに汎用性がありませんでしたが、ちょこっとJavascriptを加えてあげることで気持ちよく動くアコーディオンリストができます。
ライブラリなどは不要です。
閉じるときのコードはたったの3行!

See the Pen accordion list by natsumi (@mayo31) on CodePen.18228

開くときにsetTimeoutが入る理由としては、一度隠れている要素の高さを取得するためにoverflow:visible;を指定して、そのままhiddenにして流してしまうとリフローが起きる前にhiddenになってしまい、高さが取得できない状態でheight(変数h)が設定されてしまうからです。
リフローを起こすためsetTimeoutをはさんで、そこまでの処理を一度描画させています。

	obj.style.overflow = 'visible';
	var h = obj.nextSibling.firstElementChild.clientHeight + 'px';
  setTimeout(function(){
	obj.style.overflow = 'hidden';
	obj.className = 'accordion-open';
	obj.nextSibling.style.height = h;
	},100);

リフロー・リペイントについてはこのあたりの記事が詳しいです。

大事なことなので2度言っておくと、ライブラリは不要です。
・・・が、お好みでVanilla JSを入れるのも良いかと思います。