Animate accordion plugin with auto height

I am using a very lightweight plugin which is great but I can’t get it to animate withut a fixed height.

I initally tried the usual transitions before realising they did not work with auto height

I tried modifying some JS I found but this did not work

var headers = document.querySelectorAll('.aab__accordion_head');

for (var i=0; i<headers.length; i++) {
  headers[i].addEventListener('click', toggleDisplay);
}

function toggleDisplay() {
  if (this.parentNode.classList.contains('aab__accordion_body--show')) {
    var currentlyDisplayed = document.querySelectorAll('.aab__accordion_body--show');
    for (var e=0; e<currentlyDisplayed.length; e++) {
      currentlyDisplayed[e].classList.remove('aab__accordion_body--show');
    } 
  } else {
    this.closest('.aab__accordion_body').classList.add('aab__accordion_body--show');
  }
}

I also tried a suggestion of using ScaleY like this

.wp-block-aab-accordion-block .aab__accordion_body {
    transform: scaleY(0);
    display: 
    transition: scale 300ms ease-in-out !important; 

}


.wp-block-aab-accordion-block .aab__accordion_body.aab__accordion_body--show {
    transform: scaleY(1);
    transition: scale 300ms ease-in-out !important; 
}

But this still reserves the space where it should be and doesn’t work.

I’ve tried this too but with no luck

.aab__accordion_container  {
    display: grid !important;
}

.aab__accordion_head:hover + .aab__accordion_body--show {
    display: flex !important;
    flex-direction: column !important;
}

.aab__accordion_container p {
    flex-basis: 0;
    overflow: hidden;
    transition: 1s;
}

I will actually have Gutenberg blocks in there too but I just thought i would test to see if I could get the

to show

The accordion panel is here

tinyurl.com/4afdnpkm

Any help would be appreciated

Thanks