Can't use css method for conditional fields

[Mary Makowsky]

Hello,

I am trying to using the toggle switch on just two radio inputs and have the selection conditionally show one of two select menus. Since the toggle switch does not change the 'checked' value the css at the bottom of this post is not working. Do you know another way to achieve this?

Here is my test page: http://www.maxms.com/sbu/
(Scroll down just a tad to the "FIND YOUR PROGRAM" area.)

.major:checked ~ .major-menu,
        .career:checked ~ .career-menu
        {
            clip: auto;
            height: auto;
            margin: 0;
            overflow: visible;
            position: static;
            width: auto;
        }

        major:not(:checked) ~ .major-menu,
        .career:not(:checked) ~ .career-menu
         {
            border: 0;
            clip: rect(0 0 0 0);
            height: 1px;
            margin: -1px;
            overflow: hidden;
            padding: 0;
            position: absolute;
            width: 1px;
        }

Thank you!

[Ionuț Colceriu]

The problem is that the ~ selector won't work, because the inputs are inside the .switch-toggle container. And since there is no CSS parent selector, you'll have to place your blocks inside the .switch-toggle container.

To not mess around too much with the toggle's styles too much, the best approach would be to use position: absolute on the blocks you need to conditionally show/hide.

Here's a quick demo:
http://jsbin.com/yehixe/2/edit

[Mary Makowsky]

This is great - thank you so much!