How to use less jQuery in jQuery accordion

Question

Here's a jsfiddle that works great. The HTML is good, but the problem is there's a LOT of jQuery. I'm sure there's a better way. Any help would be great! https://jsfiddle.net/jrmleduc/q9dboshu/

<input type="radio" value="true" name="1" id="1"><br>
<span class="classname1"><label>One</label><br></span>

<input type="radio" value="true" name="2" id="2"><br>
<span class="classname2"><label>Two</label><br></span>

<input type="radio" value="true" name="3" id="3"><br>
<span class="classname3"><label>Three</label><br></span>

$("input[name='1']").attr("checked", false);
$("input[name='3']").attr("checked", false);
$("input[name='2']").attr("checked", false);
$("span.classname1").toggle(this.value === "false");
$("span.classname2").toggle(this.value === "false");
$("span.classname3").toggle(this.value === "false");

$("input[name='1']").on("click", function(){
    $("span.classname1").toggle(this.value === "true");
    $("span.classname2").toggle(this.value === "false");
    $("span.classname3").toggle(this.value === "false");
    $("input[name='2']").attr("checked", false);
    $("input[name='3']").attr("checked", false);
});

$("input[name='2']").on("click", function(){
    $("span.classname1").toggle(this.value === "false");
    $("span.classname2").toggle(this.value === "true");
    $("span.classname3").toggle(this.value === "false");
    $("input[name='1']").attr("checked", false);
    $("input[name='3']").attr("checked", false);
});

$("input[name='3']").on("click", function(){
    $("span.classname1").toggle(this.value === "false");
    $("span.classname2").toggle(this.value === "false");
    $("span.classname3").toggle(this.value === "true");
    $("input[name='1']").attr("checked", false);
    $("input[name='2']").attr("checked", false);
});

Answer 1

This is a little fragile, but this is a quick way to do it.

const allInputs = $('input');

// Loop through all inputs, 
// if checked, show the span, else hide the span
const showOnlyChecked = function(){
    allInputs.each(function(index, item){
    if (item.checked === false){
        $(item).next().next().hide(); // next() > <br> > next() > <span?
    } else {
        $(item).next().next().show();
    }
    })
}

showOnlyChecked(); 
$('body').on('click', 'input', showOnlyChecked);

JS Fiddle

You should know that if you give all the radio boxes the same name="" attribute, then by default the browser will only let you select one of the group. That's just how Radio Buttons work...

Learn About Radio Buttons

Answer 2

If you add some more generic classes to your HTML, you can use those to select the entire group of elements more easily.

<input type="radio" value="true" name="1" id="1" class="accordion-radio"><br>
<span class="classname1 accordion-label"><label>One</label><br></span>

<input type="radio" value="true" name="2" id="2" class="accordion-radio"><br>
<span class="classname2 accordion-label"><label>Two</label><br></span>

<input type="radio" value="true" name="3" id="3" class="accordion-radio"><br>
<span class="classname3 accordion-label"><label>Three</label><br></span>

Then you can condense your code down and take advantage of jQuery's use of $(this) to select the item currently firing the event handler and use the fact to have unique id attributes on your elements.

$("input.accordion-radio").prop("checked", false);
$("span.accordion-label").toggle(this.value === "false");

$("input.accordion-radio").on("click", function(){
    $("span.accordion-label").toggle(this.value === "false");
    $("input.accordion-radio").not("#"+$(this).attr("id")).prop("checked", false);
    $("span.classname" + $(this).attr("id")).toggle(this.value === "true");
});

JSFiddle Example

Answer 3

CSS only solution:

 input[name="radio"]+br+span { display: none; } input[name="radio"]:checked+br+span { display: block; } 

 <input type="radio" name="radio" id="1"><br> <span class="classname"><label for="1">One</label><br></span> <input type="radio" name="radio" id="2"><br> <span class="classname"><label for="2">Two</label><br></span> <input type="radio" name="radio" id="3"><br> <span class="classname"><label for="3">Three</label><br></span>