Saryk Saryk - 5 months ago 8
CSS Question

Checkbox and Radio buttons behaviour

I am using a set of checkboxes to have some drop-down menus by switching their

display:none;
to
display:block
when box or radio is checked.

This is the checkbox version : https://jsfiddle.net/hw207q2L/

and this is the radio version : https://jsfiddle.net/3xzuw47x/

I'd like to combine both so that when opening a new part it closes the other ones (radio behaviour) ; while at the same time being able to close the part I opened by clicking it again (checkbox behaviour).

Any ideas that wouldn't involve javascript ? I'd like to restrain from using js, but if it's not possible tell me.

Answer

It requires functionality that prevents default behavior, so it's unlikely to make it happen without the using of additional framework or javascript.

This not exactly a duplicate, but please check How to uncheck checked radio button [duplicate].

Just use this javascript in your second version of code:

var allRadios = document.getElementsByName('titles');
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;
        }
    };
}