[Resolved] Radio button toggle box

[David]

Hi Guys,

I have created a simple 3 column grid, which contains a radio button to show hide the contained info.

<div class="grid-33 grid-tablet-33 grid-mobile-33">
    <div class="info-cell">
        <input class="db-toggle-box" id="db-toggle-1" type="radio" name="grouped">
        <label for="db-toggle-1">Info 1</label>
        <div class="db-info-1">This is info 1</div>
        </div>
</div>

Then using simple CSS to show / hide info boxes:

.db-toggle-box + label {
	display: block;
}
.db-info-1 , .db-info-2 , .db-info-3 {
    display: none;
}
.db-toggle-box:checked ~ .db-info-1 {
    display: block;
}

.db-toggle-box:checked ~ .db-info-2 {
    display: block;
}

I chose radio buttons instead of checkboxes so each selection would hide the others. All works fine. What i need is when a user clicks on a checked radio it unchecks it – so you can hide after viewing. Most examples i have read are JS – which i haven’t even got round to studying and would like to avoid having to. Any suggestions / pointers / alternative methods would be appreciated.

regards

David

[Tom]

After a quick search, I do believe you’ll need to use JS. Not having any selections isn’t standard within a radio list, which is why it’s kind of difficult.

[David]

Thanks Tom, i did try using checkboxes but got in a bit of a muddle with if this checked then uncheck this for an alternative toggle. Looks like it might be time to have a nose at JS.

[David]

Ha ha – well that weren’t to difficult to find:

<script type="text/javascript">
        var allRadios = document.getElementsByName('grouped');
        var booRadio;
        var x = 0;
        for(x = 0; x < allRadios.length; x++){

            allRadios[x].onclick = function() {
                if(booRadio == this){
                    this.checked = false;
                    booRadio = null;
                }else{
                    booRadio = this;
                }
            };
        }
    </script>

[Tom]

Awesome, thanks for sharing! 🙂

[David]

Hi Tom, I have hooked this into wp_footer so its site wide, is this the recommended thing to do?
I assume i can add more ‘group’ names to the var allRadios = document.getElementsByName('grouped'); function? Would you know the syntax if so?

thanks

David

[Tom]

Yep, wp_footer should work.

I think that selector should work as well.

[Author]

Posts