Archived topic
Radio button toggle box
6 replies · Started by David on July 14, 2017
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
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.
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.
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>Awesome, thanks for sharing! :)
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
Yep, wp_footer should work.
I think that selector should work as well.
