I have a form with radio buttons, and I'd like to show/hide a div when people click each of the radio options. The code below works per se, but it's buggy, ie: it'll work if I hard refresh the page, but other times it will only show/hide the div but it won't toggle between the radio inputs. I usually call this function inside a but this is the first I'm trying to have it called when a user clicks on a form element. Is there a better way of calling the function so that it will always work as expected?
<label class="rcontainer" onmousedown="toggleSlide('taxagentdet');" id="ag1">No
<input id="form18" type="radio" name="TaxAgent" value="0">
<span class="rbutton"></span>
</label>
<label class="rcontainer" onmousedown="toggleSlide('taxagentdet');" id="ag2">Yes
<input id="form19" type="radio" name="TaxAgent" value="1">
<span class="rbutton"></span>
</label>
See the sample code snippet below. In it, form element wraps two radio input elements of the same name, and you can use JavaScript to listen for its change event rather than detecting individual mousedown. This will also enable users to use keyboard to toggle between radios.
const form = document.querySelector('form');
const div = document.querySelector('.content');
form.addEventListener('change', e => {
// Do whatever you need to do to toggle
const toggleStatus = e.target.value === "yes" ? "Toggle On" : "Toggle Off";
div.innerText = toggleStatus;
});<form>
<label for="no"><input type="radio" id="no" name="toggle" value="no">No</label>
<label for="yes"><input type="radio" id="yes" name="toggle" value="yes">Yes</label>
</form>
<div class="content" style="padding: 20px; margin-top: 20px; box-shadow: 0 1px 15px rgba(0,0,0,.2); width: 150px;">
Unselected
</div>function toggleDiv(toggleType) {
const el = document.getElementById("div_content");
if(toggleType === 'yes') el.style.display="block";
if(toggleType === 'no') el.style.display="none";
}<input type="radio" onChange="toggleDiv('yes')" name="Yes" id="yes" checked="true"> <label for="yes" >YES</label>
<input type="radio" onChange="toggleDiv('no')" name="Yes" id="no"> <label for="no">NO</label>
<div id="div_content">
DIV Content
</div>