Hide/show fields upon selecting a radiobutton value in asp.net

Question

I am very new to C# asp.net. I am trying to make an online registration form. I am struggling with the below issue. Can someone help me out please?

There are 5 fields for this problem
1) Category : this is a radio button which has 2 options -> Student and Staff
2) Course : this is a Dropdown
3) Semester : this is a Dropdown
4) Department : this is a Free text field
5) Designation : this is a Free text field

If an end user selects Student radio button, then Course & semester fields should be visible and department & designation should NOT be visible

If an end user selects Staff radio button, then department & designation fields should be visible and Course & semester should NOT be visible

Can someone please help me accomplish this. Here is the code.

        <div class="col-lg-10">
            <div class="radio">
                <label>
                    <asp:RadioButtonList ID="category" runat="server">
                        <asp:ListItem Text="Student" Value="student"></asp:ListItem>
                        <asp:ListItem Text="Staff" Value="staff"></asp:ListItem>
                    </asp:RadioButtonList>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator21" runat="server" ControlToValidate="category" ErrorMessage="Category is Requried" Style="color: #58CB00"></asp:RequiredFieldValidator>
                </label>
            </div>
        </div>
    </div>

    <div class="Department">
        <asp:Label ID="Label3" runat="server" Text="Department*" CssClass="col-lg-2 control-label" Font-Size="Larger"></asp:Label><br />
        <div class="col-lg-10">
            <asp:DropDownList ID="DropDownList1" runat="server" CssClass="form-control ddl">
                <asp:ListItem>Select your department</asp:ListItem>
                <asp:ListItem>Administration</asp:ListItem>
                <asp:ListItem>IT Solutions</asp:ListItem>
                <asp:ListItem>B.Tech(CSE)</asp:ListItem>
                <asp:ListItem>MCA</asp:ListItem>
                <asp:ListItem>iMBA</asp:ListItem>
                <asp:ListItem>English</asp:ListItem>
                <asp:ListItem>Library</asp:ListItem>
                <asp:ListItem>Others</asp:ListItem>

            </asp:DropDownList>
        </div>
    </div>
    <br />

    <div class="Designation">
        <asp:Label ID="Label4" runat="server" Text="Designation*" CssClass="col-lg-2 control-label" Font-Size="Larger"></asp:Label>
        <div class="col-lg-10">
            <asp:TextBox ID="TextBox2" runat="server" CssClass="form-control"></asp:TextBox>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="TextBox2" ErrorMessage="Designation is Requried" Style="color: #58CB00"> </asp:RequiredFieldValidator>

        </div>
    </div>

    <div class="Course">
        <asp:Label ID="Label5" runat="server" Text="Course*" CssClass="col-lg-2 control-label" Font-Size="Larger"></asp:Label>
        <div class="col-lg-10">
            <asp:DropDownList ID="DropDownList2" runat="server" CssClass="form-control ddl">
                <asp:ListItem>B.Tech(CSE)</asp:ListItem>
                <asp:ListItem>MCA</asp:ListItem>
                <asp:ListItem>iMBA</asp:ListItem>
                <asp:ListItem>English</asp:ListItem>
            </asp:DropDownList>
        </div>
    </div>
    <br />
    <div class="Semester">
        <asp:Label ID="Label6" runat="server" Text="Semester*" CssClass="col-lg-2 control-label" Font-Size="Larger"></asp:Label>
        <div class="col-lg-10">
            <asp:DropDownList ID="DropDownList3" runat="server" CssClass="form-control ddl">
                <asp:ListItem>I</asp:ListItem>
                <asp:ListItem>II</asp:ListItem>
                <asp:ListItem>III</asp:ListItem>
                <asp:ListItem>IV</asp:ListItem>
                <asp:ListItem>V</asp:ListItem>
                <asp:ListItem>VI</asp:ListItem>
                <asp:ListItem>VII</asp:ListItem>
                <asp:ListItem>VIII</asp:ListItem>
                <asp:ListItem>IX</asp:ListItem>
                <asp:ListItem>X</asp:ListItem>
            </asp:DropDownList>
        </div>
    </div>

Answer 1

Using category_SelectedIndexChanged we can able to achieve it

.Aspx Code

<div class="col-lg-10">
        <div class="radio">
            <label>
                <asp:RadioButtonList ID="category" runat="server" AutoPostBack="true" OnSelectedIndexChanged="category_SelectedIndexChanged">
                    <asp:ListItem Text="Student" Value="student"></asp:ListItem>
                    <asp:ListItem Text="Staff" Value="staff"></asp:ListItem>
                </asp:RadioButtonList>
                <asp:RequiredFieldValidator ID="RequiredFieldValidator21" runat="server" ControlToValidate="category" ErrorMessage="Category is Requried" Style="color: #58CB00"></asp:RequiredFieldValidator>
            </label>
        </div>
    </div>


<div class="Department" id="department" runat="server" >
    <asp:Label ID="Label3" runat="server" Text="Department*" CssClass="col-lg-2 control-label" Font-Size="Larger"></asp:Label><br />
    <div class="col-lg-10">
        <asp:DropDownList ID="DropDownList1" runat="server" CssClass="form-control ddl">
            <asp:ListItem>Select your department</asp:ListItem>
            <asp:ListItem>Administration</asp:ListItem>
            <asp:ListItem>IT Solutions</asp:ListItem>
            <asp:ListItem>B.Tech(CSE)</asp:ListItem>
            <asp:ListItem>MCA</asp:ListItem>
            <asp:ListItem>iMBA</asp:ListItem>
            <asp:ListItem>English</asp:ListItem>
            <asp:ListItem>Library</asp:ListItem>
            <asp:ListItem>Others</asp:ListItem>

        </asp:DropDownList>
    </div>
</div>
<br />

<div class="Designation" id="desig" runat="server">
    <asp:Label ID="Label4" runat="server" Text="Designation*" CssClass="col-lg-2 control-label" Font-Size="Larger"></asp:Label>
    <div class="col-lg-10">
        <asp:TextBox ID="TextBox2" runat="server" CssClass="form-control"></asp:TextBox>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="TextBox2" ErrorMessage="Designation is Requried" Style="color: #58CB00"> </asp:RequiredFieldValidator>

    </div>
</div>

<div class="Course" id="cour" runat="server">
    <asp:Label ID="Label5" runat="server" Text="Course*" CssClass="col-lg-2 control-label" Font-Size="Larger"></asp:Label>
    <div class="col-lg-10">
        <asp:DropDownList ID="DropDownList2" runat="server" CssClass="form-control ddl">
            <asp:ListItem>B.Tech(CSE)</asp:ListItem>
            <asp:ListItem>MCA</asp:ListItem>
            <asp:ListItem>iMBA</asp:ListItem>
            <asp:ListItem>English</asp:ListItem>
        </asp:DropDownList>
    </div>
</div>
<br />
<div class="Semester" id="sem" runat="server">
    <asp:Label ID="Label6" runat="server" Text="Semester*" CssClass="col-lg-2 control-label" Font-Size="Larger"></asp:Label>
    <div class="col-lg-10">
        <asp:DropDownList ID="DropDownList3" runat="server" CssClass="form-control ddl">
            <asp:ListItem>I</asp:ListItem>
            <asp:ListItem>II</asp:ListItem>
            <asp:ListItem>III</asp:ListItem>
            <asp:ListItem>IV</asp:ListItem>
            <asp:ListItem>V</asp:ListItem>
            <asp:ListItem>VI</asp:ListItem>
            <asp:ListItem>VII</asp:ListItem>
            <asp:ListItem>VIII</asp:ListItem>
            <asp:ListItem>IX</asp:ListItem>
            <asp:ListItem>X</asp:ListItem>
        </asp:DropDownList>
    </div>
</div>

.CS code

protected void category_SelectedIndexChanged(object sender, EventArgs e)
    {
        if(category.SelectedValue =="student")
        {
            cour.Visible = true;
            sem.Visible = true;
            department.Visible = false;
            desig.Visible = false;
        }
        else
        {
            cour.Visible = false;
            sem.Visible = false;
            department.Visible = true;
            desig.Visible = true;
        }
    }

Answer 2

You can easily do it with jQuery like this:-

$(document).ready(function () {
     $('input[name="category"]').change(function () {
         if ($.trim($(this).val()) == "student") {
               $('.Department,.Designation').hide();
               $('.Designation,.Course').show();
          }
          else {
               $('.Department,.Designation').show();
               $('.Designation,.Course').hide();
          }
      });
});

You need to import the jQuery library.