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を入れるのも良いかと思います。