Grow your CSS skills. Land your dream job.

how to make the div to hide upon radio button click

  • # June 24, 2013 at 5:32 am

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


    .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;

    }

    # June 24, 2013 at 5:52 am

    .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


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

    # June 24, 2013 at 6:20 am

    Thanx #pixelgrid for your reply but still itz not working

    # June 24, 2013 at 6:22 am

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

    # June 24, 2013 at 6:26 am

    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

    # June 24, 2013 at 6:47 am

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

    # June 24, 2013 at 6:53 am

    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

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".