JSFiddle - React, Tailwind, and code Playground

HTML

<input id='editpositive' class='form__radio-input' type='radio' name='subgroupEdit' value='editpositive' checked=checked />
<label class='form__radio-label' for='editpositive'>
  <span class='form__radio-button'></span>Yes</label>

<input id='editnegative' class='form__radio-input' type='radio' name='subgroupEdit' value='editnegative' />
<label class='form__radio-label' for='editnegative'>
  <span class='form__radio-button'></span>No</label>


<div class='subgroupEdit-accordion-show'>
  STUFF GOES HERE
</div>
More bits doon 'ere

CSS

.subgroupEdit-accordion-show {
  transition: height 0.5s ease-in-out;
  overflow: hidden;
}

JavaScript

const slideDown = element => element.style.height = `${element.scrollHeight}px`
const slideUp = element => element.style.height = `0px`;

if (document.getElementById('editpositive').checked) {
	slideDown(document.querySelector('.subgroupEdit-accordion-show'));
} else {
	slideUp(document.querySelector('.subgroupEdit-accordion-show'));
}

// if subgroup radio button is yes, show subgroup input boxes - otherwise, hide and clear
document.getElementById('editpositive').addEventListener('click', async (e) => {
  slideDown(document.querySelector('.subgroupEdit-accordion-show'))
})

document.getElementById('editnegative').addEventListener('click', async (e) => {
  slideUp(document.querySelector('.subgroupEdit-accordion-show'))
  /* document.querySelector('.subgroupEdit-accordion-show').style.display= 'none' */
})