how to make the div to hide upon radio button click

[mehra1]

[http://jsfiddle.net/heZBT/1685/](http://jsfiddle.net/heZBT/1686/ “jsfidle”)

All

.radio-toolbar input[type=”radio”] {

}

.radio-toolbar label {
display:inline-block;
background-color:#ddd;
padding:4px 11px;
font-family:Arial;
font-size:16px;
}

.rot{
background-color:#ddd;
width:24px;
height:24px;
display:block;
}

.radio-toolbar input[type=”radio”]:checked + .rot {
display:none;

}

[pixelgrid]

.radio-toolbar input[type=”radio”]:checked + .rot

the + selector is the next sibling so to solve your problem either use the ~ selector which is a general sibling one,

.radio-toolbar input[type=”radio”]:checked ~ .rot

or change your html to this

All

so now your div comes right after the radio button and your css works as is

[mehra1]

Thanx #pixelgrid for your reply but still itz not working

[pixelgrid]

when you change your code on jsfiddle you have to hit run again for changes to be applied. i tried it it works

[mehra1]

I know i did dat :) might be i m on my mobile browser dats y itz not happening.
I will check on computer and let u know
Thanx again

[mehra1]

yup tried on computer itz working but when i put both in different divs they dont work.

[pixelgrid]

no it doesnt work this way. css can target only siblings or childred of siblings cant select a sibling of an elements parent with css.

what you could do is put the label and the input on different divs. not semantic but can help you achieve things with css only.

customize the label and hide entirelly the radio button. when the label is clicked the radio button will be checked no need for it displaying.

if all this is just too much you can always use javascript

[Author]

Posts