Two radio buttons are in place, with one pre-selected upon loading the page. If 'yes' is checked, a div will have a height of 100%, while 'no' will set the height to 0px (making it invisible). Upon switching between the buttons, the div will slide up or down accordingly.
The functionality is smooth except when 'yes' is initially checked - the div correctly appears visible on load, but when 'no' is selected, it suddenly disappears instead of sliding smoothly. However, after interacting with the buttons again, it functions as expected.
This behavior has been replicated in a jsfiddle, where the effect can be observed (even though the text remains visible). On the first click of 'no', the div jumps rather than slides, but subsequent clicks work as intended.
This is the HTML structure:
<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>
CSS styling:
.subgroupEdit-accordion-show {
transition: height 0.5s ease-in-out;
height: 100%;
}
Javascript implementation:
const slideDown = element => element.style.height = `${element.scrollHeight}px`
const slideUp = element => element.style.height = `0px`
document.getElementById('editpositive').addEventListener('click', async () => {
slideDown(document.querySelector('.subgroupEdit-accordion-show'))
})
document.getElementById('editnegative').addEventListener('click', async () => {
slideUp(document.querySelector('.subgroupEdit-accordion-show'))
})
How do I achieve a smooth sliding animation to adjust the div height to 0px when it is initially visible on page load?