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>
STUFF GOES HERE
</div>
<div class='section'>
  More bits doon 'ere
</div>

CSS

.section {
  overflow: hidden;
  transition: transform 0.3s ease-out; 
  height: 100%;
  transform: scaleY(1);
  transform-origin: top; 
}
.section.collapsed {
  transform: scaleY(0);
}

JavaScript

const node = document.querySelector('.section');
document.getElementById('editpositive').addEventListener('click', async (e) => {
	console.log(node)
  node.classList.remove('collapsed')        
})
                
document.getElementById('editnegative').addEventListener('click', async (e) => {
       node.classList.add('collapsed')
       
        })