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;
  height: 100%;
}

JavaScript

const slideDown = element => element.style.height = `${element.scrollHeight}px`
const slideUp = element => element.style.height = `0px`; 
// 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' */
        })