So I have an accordion with invisible radio buttons. Everything works fine and well, until I try to get the status of the radio button. I have 4 rows of the following code for each accordion radio button:
const ac1 = document.getElementById('ac-1');
Radio buttons wrapped in a form:
<form class="ac-container">
<input id="ac-1" name="accordion-1" type="radio" checked="checked">
<input id="ac-2" name="accordion-1" type="radio">
<input id="ac-3" name="accordion-1" type="radio">
<input id="ac-4" name="accordion-1" type="radio">
</form>
And this is my radio button CSS:
.ac-container input {
opacity: 0;
}
To check the status of the radio button I've tried:
if (ac1.checked) {
//do something
}
if (document.getElementById('ac-1').checked) {
//do something
}
I need the radio button status so I can display stuff in real time. For regular clicks I'm just using addEventListener('click', (e) => {} and it works fine, but I need the radio buttons to also function with keyboard. That's why I need the status, so if a radio button is checked I can immediately update what's needed.
I'm not sure if this is the problem but, when I click on the radio buttons, the 'checked' attribute never transfers from one button to the other?
I'll keep looking and update if I find anything.
You can listen for input event.
Example:
<input type="radio" name="value" id="inp">
<input type="radio" name="value" id="inp2">
<script>
const inp = document.getElementById("inp")
const inp2 = document.getElementById("inp2")
inp.addEventListener('input', (e) => {
console.log(inp.checked)
})
inp2.addEventListener('input', (e) => {
console.log(inp.checked)
})
</script>
From my above comment ...
"Since the OP uses checkbox and/or radio controls why does the OP then need a JavaScript based solution? (Almost) everything could be achieved by pure HTML/CSS. "
[data-accordion] [type="radio"] + p,
[data-accordion] [type="checkbox"] + p {
height: 0;
overflow: hidden;
opacity: 0;
transition: opacity 2.5s ease-out;
}
[data-accordion] [type="radio"]:checked + p,
[data-accordion] [type="checkbox"]:checked + p {
height: auto;
opacity: 1;
}
h2 { margin: 0; font-size: 1em; }
p { margin: 0; }<article data-accordion>
<section>
<h2>Topic 4</h2>
<input type="radio" name="single-fold" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec lectus ante. Suspendisse sed tortor purus. Suspendisse potenti. Nunc pharetra odio id lorem pellentesque tincidunt.
</p>
</section>
<section>
<h2>Topic 5</h2>
<input type="radio" name="single-fold" />
<p>
Praesent ut ipsum efficitur, commodo lectus eu, maximus risus. Fusce eu ipsum mauris. Pellentesque semper neque a convallis consequat. Suspendisse eu urna quis est condimentum dapibus id ac lectus. Nulla sit amet hendrerit arcu.
</p>
</section>
<section>
<h2>Topic 6</h2>
<input type="radio" name="single-fold" />
<p>
Vestibulum vel sapien convallis diam iaculis consectetur non non ex. Suspendisse eget hendrerit ipsum. Suspendisse finibus quam eget est fringilla, finibus vehicula tortor varius. Praesent fermentum ac odio a ullamcorper.
</p>
</section>
</article>
<hr/>
<article data-accordion>
<section>
<h2>Topic 1</h2>
<input type="checkbox" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec lectus ante. Suspendisse sed tortor purus. Suspendisse potenti. Nunc pharetra odio id lorem pellentesque tincidunt.
</p>
</section>
<section>
<h2>Topic 5</h2>
<input type="checkbox" />
<p>
Praesent ut ipsum efficitur, commodo lectus eu, maximus risus. Fusce eu ipsum mauris. Pellentesque semper neque a convallis consequat. Suspendisse eu urna quis est condimentum dapibus id ac lectus. Nulla sit amet hendrerit arcu.
</p>
</section>
<section>
<h2>Topic 3</h2>
<input type="checkbox" />
<p>
Vestibulum vel sapien convallis diam iaculis consectetur non non ex. Suspendisse eget hendrerit ipsum. Suspendisse finibus quam eget est fringilla, finibus vehicula tortor varius. Praesent fermentum ac odio a ullamcorper.
</p>
</section>
</article>