Estoy tratando de crear alguna funcionalidad de sitio web donde hay dos botones de radio "Sí" y "No", y cuando se selecciona "Sí", expande la parte plegable de HTML, y cuando se selecciona "No", se colapsa. El problema con el que me encuentro es que si hace clic continuamente en el botón de opción "Sí", se expandirá y colapsará. Solo quiero uno u otro dependiendo de qué botón esté seleccionado. Esto es lo que se me ha ocurrido:

HTML:

 <div class="row gy-3"> <label><b>Have you ever applied for a job with any of the companies listed above as an employee or as a temporary employee? *</b></label> <div class="col-md-4"> <div class="form-check"> <input type="radio" class="form-check-input" id="validationFormCheck2" name="radio-stacked" value="Yes" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample" required> <label class="form-check-label" for="validationFormCheck2">Yes</label> </div> <div class="form-check mb-3"> <input type="radio" class="form-check-input" id="validationFormCheck3" name="radio-stacked" value="No" required> <label class="form-check-label" for="validationFormCheck3">No</label> <div class="invalid-feedback">More example invalid feedback text</div> </div> <div class="collapse" id="collapseExample"> <div class="card card-body"> Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger. </div> </div> </div> </div>

JS:

 $('#employmentForm input').on('change', function() { var value = $('input[name=radio-stacked]:checked', '#employmentForm').val(); if (value === "Yes") { var myCollapse = document.getElementById('collapseExample') var bCollapse = new bootstrap.Collapse(myCollapse, { show: true }) } else if (value === "No") { var myCollapse = document.getElementById('collapseExample') var bsCollapse = new bootstrap.Collapse(myCollapse, { dispose: true }) } });