Ciao, la logica che hai usato non può andare bene.

La questione non è così semplice da comprendere ma grossomodo ti spiego cosa avviene e come puoi risolvere.

L'applicazione dei gestori click eseguita in quel modo comporta un primo fattore che causa il problema: il cosiddetto "bubbling" nella propagazione degli eventi. Normalmente la propagazione degli eventi avviene dall'elemento più interno a quello più esterno.

Ulteriore premessa:

Da quel che ho potuto valutare, la funzione setTransitionHeights() serve solo a reimpostare le altezze limiti e l'altezza corrente, in base allo stato (aperto/chiuso) in cui si trova l'elemento. Richiamando tale funzione l'altezza corrente sarà impostata istantaneamente senza eseguire alcuna transizione; questo perché all'interno della funzione si gioca con la classe "open" per determinare lo stato aperto/chiuso dei contenitori e poterne rilevare i valori limiti. In sostanza, per via di tali operazioni, la transizione viene bypassata.

La transizione invece avviene applicando/rimuovendo la classe "open" e impostando height secondo il corrispettivo valore limite. Esattamente ciò che avviene al click dei "toggler".


Considerando questa premessa, il tuo script aggiuntivo applica un gestore di evento click a tutti i contenitori espandibili e, in tale gestore, vai a inizializzare nuovamente le altezze, ad ogni click, per tutti i contenitori espandibili richiamando appunto la funzione anzidetta.

Questo gestore, dal momento che fa riferimento al contenitore, viene eseguito (per la questione del bubbling) dopo quello impostato per il "toggler" che invece sta dentro il contenitore. Per tale motivo, l'azione del "toggler" viene praticamente inibita dalla funzione setTransitionHeights(), per cui l'altezza è reimpostata istantaneamente senza alcuna transizione.

La stessa cosa avviene per l'evento "resize" dove viene richiamata la funzione che inizializza i limiti e imposta direttamente l'altezza senza che avvenga però alcuna transizione. Cioè, se si restringe la pagina (vedi quanto indicato nella pagina dello script), i contenitori "collapsible" (nel variare la loro larghezza) variano anche in altezza; per tale motivo è stato impostato l'evento resize in cui viene richiamata quella funzione.

Certo, restringendo manualmente la finestra del browser, sembra quasi che avvenga una transizione, invece viene semplicemente reimpostata l'altezza dei contenitori (puoi provare nella pagina dello script, dove i testi contenuti riempiono l'intera larghezza dei contenitori).

Ora, a parte far funzionare la transizione al click sui "toggler", non mi è chiaro se tu vuoi che avvenga la transizione anche quando vai ad espandere i tuoi contenuti - perché in tal caso ci sarebbero appunto da valutare ulteriori fattori - o se ti è sufficiente che il contenitore si ridimensioni istantaneamente così come avviene per l'evento "resize".

Ad ogni modo, più che eseguire l'operazione in modo ridondante sull'evento click per tutti i contenitori - dove stai quindi richiamando la funzione a prescindere che avvenga un effettiva variazione delle dimensioni - potresti piuttosto eseguirla al click dei tuoi elenchi espandibili, perché è in quell'istante che la dimensione va a cambiare.

Ti propongo qui una possibile soluzione dove ho previsto la transizione anche al toggle sugli elenchi; ho accorpato l'intero script dentro il gestore principale, per cui se lo provi sulla tua pagina dovrai rimuovere lo script che hai posto a fine body per il toggle degli elenchi:

codice:
window.addEventListener("DOMContentLoaded", e => {
  // Original JavaScript code by Chirp Internet: chirpinternet.eu
  // Please acknowledge use of this code by including this header.

  const getContainerHeight = el => {
    return window.getComputedStyle(el).getPropertyValue("height");
  };

  const setTransitionHeights = el => {

    let containerWasOpen = el.classList.contains("open");

    el.style.height = null;

    el.classList.remove("open", "ready");
    el.dataset.initial = getContainerHeight(el);

    el.classList.add("open");
    el.dataset.final = getContainerHeight(el);
    el.classList.remove("open");

    if (containerWasOpen) {
      el.classList.add("open");
      el.style.height = el.dataset.final;
    } else {
      el.style.height = el.dataset.initial;
    }

    el.classList.add("ready");

  };

  document.querySelectorAll(".collapsible.slow").forEach(current => {

    let toggler = document.createElement("div");
    toggler.className = "toggler";
    current.appendChild(toggler);

    setTransitionHeights(current);

    toggler.addEventListener("click", e => {
      current.style.height = current.classList.toggle("open") ? current.dataset.final : current.dataset.initial;
    });

  });

  window.addEventListener("resize", e => {

    document.querySelectorAll(".collapsible.slow").forEach(current => {
      setTransitionHeights(current);
    });

  });

  var toggler = document.getElementsByClassName("caret");
  var i;

  for (i = 0; i < toggler.length; i++) {
    toggler[i].addEventListener("click", function() {
      this.parentElement.querySelector(".nested").classList.toggle("active");
      this.classList.toggle("caret-down");

      // Qui reimposto le altezze del contenitore corrente ed eseguo la transizione
      
      const collapsible = this.closest('.collapsible.slow');
      const curHeight = getContainerHeight(collapsible);
      setTransitionHeights(collapsible);
      collapsible.style.height = curHeight;
      setTimeout(() => {
        collapsible.style.height = collapsible.dataset.final
      }, 0)

    });
  }
});



PS: occhio anche agli errori di validazione del markup HTML e del CSS, presenti sulle tue pagine. Se passi le pagine che hai linkato ad un validatore, tira fuori diversi errori. Consiglio eventualmente di correggerli.