Option to choose between two subscreens on one screen

Hello,

I am looking into developing a website page where I have a choice of two radio buttons.  If I choose one radio button, I get to do one thing and one side of the screen is visibly apparent while the other optioned screen is greyed out but semi visible.  How could I do this using CSS and HTML with asp.net?  Thanks!
VBBRettAsked:
Who is Participating?
 
guru_samiConnect With a Mentor Commented:
Here's a sample...not too elegant but should help to begin with...
Initially both screens are greyed out...as none of the options are selected.

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#rblOptions input").click(function () {
                //This add/remove can be refined...
                if ($(this).val() == "1") {
                    //you can do whatever you want when option1 is selected
                    $("#divScreen1").addClass("selected");
                    $("#divScreen1").removeClass("greyedout");
                    $("#divScreen2").addClass("greyedout");
                    $("#divScreen2").removeClass("selected");
                }
                else {
                    $("#divScreen1").removeClass("selected");
                    $("#divScreen1").addClass("greyedout");
                    $("#divScreen2").removeClass("greyedout");
                    $("#divScreen2").addClass("selected");
                }
            });
        });
    </script>
    <style type="text/css">
        .selected {
            background-color:yellow;
        }
        .greyedout {
            background-color:rgba(207, 196, 196,0.5);
           opacity:0.3;
        }

    </style>
<asp:RadioButtonList ID="rblOptions" runat="server" RepeatLayout="Flow">
            <asp:ListItem Text="Option 1" Value="1"/>
            <asp:ListItem Text="Option 2" Value="2"/>
        </asp:RadioButtonList>
        <div id="divScreen1" class="greyedout" style="height:20px;width:100px;">
            Screen 1
        </div>
        <div id="divScreen2" class="greyedout" style="height:20px;width:100px;">
            Screen 2
        </div>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.