jquery function that hides/displays text based on a drop down list
<p>Hi everyone and thanks in advance for the help. So I have been learning asp.net with C# over the past two weeks, and feel like I get it pretty well, but I am having some trouble with jQuery functionality. I was trying to set up a form that would have a drop down list and depending on the option selected a different account creation form would be displayed within its panel. I used the following code:</p>

<pre><code> &lt;%@ Page Title="" Language="C#" MasterPageFile="~/MasterPages/FrontEnd.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Login_Default" %&gt;

&lt;asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"&gt;
&lt;/asp:Content&gt;

&lt;asp:Content ID="Content2" ContentPlaceHolderID="CPMainContent" Runat="Server"&gt;
    &lt;asp:DropDownList ID="AccountTypeDDL" runat="server" &gt;
        &lt;asp:ListItem&gt;Resident Account&lt;/asp:ListItem&gt;
        &lt;asp:ListItem&gt;Student Account&lt;/asp:ListItem&gt;
        &lt;asp:ListItem&gt;University Account&lt;/asp:ListItem&gt;
    &lt;/asp:DropDownList&gt;

    &lt;asp:Panel ID="CreateStudentAccountPanel" runat="server" &gt;
        &lt;asp:Label ID="Label1" runat="server" Text="Create Student Account"&gt;&lt;/asp:Label&gt;
    &lt;/asp:Panel&gt;

    &lt;asp:Panel ID="CreateUniversityAccountPanel" runat="server"&gt;
        &lt;asp:Label ID="Label2" runat="server" Text="Create University Account"&gt;&lt;/asp:Label&gt;
    &lt;/asp:Panel&gt;

    &lt;asp:Panel ID="CreateResidentAccountPanel" runat="server"&gt;
        &lt;asp:Label ID="Label3" runat="server" Text="Create Resident Account"&gt;&lt;/asp:Label&gt;
    &lt;/asp:Panel&gt;
&lt;/asp:Content&gt;

&lt;asp:Content ID="ScriptContent" ContentPlaceHolderID="CPClientScript" runat="server"&gt;
    &lt;script type="text/javascript"&gt;


        $(function ()
        {
            alert('hi');
            //This hides all initial textboxes
            $('#CreateStudentAccountPanel').hide();
            $('#CreateUniversityAccountPanel').hide();
            $('#CreateResidentAccountPanel').hide();



            $('#AccountTypeDDL').change(function ()
            {
                //This saves some time by caching the jquery value
                var val = $(this).index.toString;
                //this hides any boxes that the previous selection might have left open
                $('Panel').hide();
                //This just opens the ones we want based off the selection
                switch (val)
                {
                    case '0':
                        $('#CreateResidentAccountPanel').show();
                        $('#CreateUniversityAccountPanel').hide();
                        $('#CreateStudentAccountPanel').hide();
                       break;
                    case '1':
                        $('#CreateStudentAccountPanel').show();
                        $('#CreateResidentAccountPanel').hide();
                        $('#CreateUniversityAccountPanel').hide();
                        break;
                    case '2':
                        $('#CreateUniversityAccountPanel').show();
                        $('#CreateStudentAccountPanel').hide();
                        $('#CreateResidentAccountPanel').hide();
                        break;

                }
            });

        });
    &lt;/script&gt;
&lt;/asp:Content&gt;
</code></pre>

<p>can anyone tell my why my jQuery code is failing to hide the text within the nonselected panels? I am lost. Thanks again.</p>

<p>edit sorry messed up that last post:</p>

<pre><code>`code`
 var val = $('#&lt;= AccountTypeDDL.ClientID %&gt;').index;
                //this hides any boxes that the previous selection might have left open
                $('Panel').hide();
                //This just opens the ones we want based off the selection
                switch (val)
                {
                    case 0:
                        $('#&lt;%= CreateResidentAccountPanel.ClientID %&gt;').show();
                        $('#&lt;%= CreateStudentAccountPanel.ClientID %&gt;').hide();
                        $('#&lt;%= CreateUniversityAccountPanel.ClientID %&gt;').hide();
                       break;
                    case 1:
                        $('#&lt;%= CreateResidentAccountPanel.ClientID %&gt;').hide();
                        $('#&lt;%= CreateStudentAccountPanel.ClientID %&gt;').show();
                        $('#&lt;%= CreateUniversityAccountPanel.ClientID %&gt;').hide();
                        break;
                    case 2:
                        $('#&lt;%= CreateResidentAccountPanel.ClientID %&gt;').hide();
                        $('#&lt;%= CreateStudentAccountPanel.ClientID %&gt;').hide();
                        $('#&lt;%= CreateUniversityAccountPanel.ClientID %&gt;').show();
                        break;
</code></pre>

<p><code>code</code></p>
