gli errori in ogni caso sono dei semplici riferimenti a classi o tag lasciati vuoti nello style css
No, quelli li ho visti e infatti ho dato per scontato che li avessi lasciati volontariamente vuoti, ma ci sono altri errori di markup malformato, come lo il blocco <style> fuori posto, vari tag aperti o chiusi male e altri errori vari.

Inutile dirti che sarebbe meglio correggerli tutti, anche inserendo quei valori che hai lasciato mancanti (o tutt'al più commentare quelle parti e aggiungere un eventuale testo di promemoria).

Ad ogni modo l'esempio che fornisci (sebbene minimo) è essenziale che sia funzionante in tutte le sue parti e che abbia un codice valido perché, ripeto, è possibile che i risultati, ottenuti con un esempio mal funzionante, siano inconsistenti in quanto i diversi browser (che cercano, ognuno a proprio modo, di correggere gli errori di validazione) possono restituire differenze anche sostanziali.

Il condizionale è d'obbligo ma questo non toglie il fatto che sarebbe comunque opportuno fornire un esempio valido.

Chiaramente tutto va a vantaggio tuo

dovrebbe poter bastare del css
Sì, è possibile che sia sufficiente il solo CSS ma a seconda dell'effetto che vuoi ottenere potrebbero esserci delle limitazioni per cui potrebbe essere più semplice gestire la cosa via script.

Le animazioni CSS sono applicabili su proprietà animabili e l'effetto di transizione è apprezzabile nel caso in cui sia possibile il calcolo dei valori intermedi tra quello iniziale e quello finale.

Se tu hai un height che va da un valore X (ad esempio 100px) ad un valore "auto", ovviamente i valori intermedi non possono essere calcolati, quindi la transizione non sarà apprezzabile.

Una soluzione potrebbe essere l'uso di max-height, impostando un valore finale che sia sufficientemente grande per garantire la completa visibilità dell'elemento aperto. Questa soluzione però ha delle limitazioni in quanto non è possibile sapere esattamente quale possa essere il valore da impostare e la transizione potrebbe non essere omogenea per le eventuali diverse altezze che può avere ciascun elemento quando è aperto.

Certo, possono esserci altre soluzioni sempre CSS ma bisogna capire esattamente quali possono essere i risultati e se soddisfano le tue esigenze.

In ogni caso, per provare adeguatamente delle eventuali soluzioni e verificarne gli effettivi risultati, è opportuno partire da un codice di funzionante di esempio; vedo ora che sei riuscito a postarlo