hide/show div on check

Question

У меня есть этот код ниже. Я пытаюсь установить флажок. 2 расширенных divs будут показаны/скрыты. По какой-то причине функции попадают, но они не скрывают/показывают hte div. Я поставил точный код в jfiddle, и он работал правильно. Любой вход будет большим спасибо.

ЗДЕСЬ JFIDDLE, ЧТО РАБОТАЕТ ПРАВИЛЬНО http://jsfiddle.net/svmY3/3/

 <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="HorizontalSinglePageOptinSqueezePage2.ascx.cs" Inherits="UmbracoUsercontrols.HorizontalSinglePageOptinSqueezePage2" %> 
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"> 

</script> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       alert('test234123123'); 
       $("#assist").change(function() { 
        $("#expanded, #expanded2").toggle(); 
        alert('test2343'); 
       }); 
      }); 
      function showhide() { 
       alert('test'); 
       $("#expanded, #expanded2").toggle(); 
      } 

    </script>  
     <!-- BASIC FORM --> 
    <div class="col-md-4"> 
         <form role="form"> 
          <div class="form-group"> 
           <Asp:TextBox runat="server" class="form-control" type="text" id="name" placeholder="NAME"/> 
          </div> 
          <div class="form-group"> 
           <Asp:TextBox runat="server" class="form-control" type="email" id="email" placeholder="EMAIL"/> 
          </div> 

       <div class="assistance">I would like immediate assistance: <input type="checkbox" runat="server" id="assist" onclick="showhide();" /></div> 

       <!-- EXPANDED FORM SECTION 1 --> 
       <div style="display:none" runat="server" class="expanded" id="expanded"> 

        <div class="form-group"> 
        <asp:textbox runat="server" type="tel" class="form-control" id="phone" placeholder="PHONE"/> 
        </div> 

       <p class="center">Please tell us about your situation and we'll see if we can help. We will also email you the <em>The 5 Easiest Ways to STOP Foreclosure in Under 48 Hours or Less</em>.</p> 
       </div> 
       <!-- END EXPANDED FORM SECTION 1 --> 
          </form></div> 



       <div class="col-md-5"> 


       <!-- EXPANDED FORM SECTION 2 --> 
        <div runat="server" style="display:none" class="expanded" id="expanded2"> 

        <div class="form-group"> 
        <asp:label runat="server">Are you most interested in:</asp:label> 
        <asp:dropdownlist runat="server" id="interest" class="pull-right"> 
         <asp:listitem value="Selling" Text="Selling"></asp:listitem> 
         <asp:listitem value="Refinancing" Text="Refinancing"> 
         </asp:listitem> 
         <asp:listitem value="Keeping" Text="Keeping"></asp:listitem> 
         </asp:dropdownlist> 
        </div> 

        <div class="form-group"> 
        <Asp:Label runat="server" >Are you in foreclosure:</Asp:Label> 
         <asp:DropDownList runat="server" ID="foreclosure" OnChange="javascript:toggle();"> 
            <asp:ListItem Value="Yes" Text="Yes" /> 
            <asp:ListItem Selected="True" Value="No" Text="No" /> 
           </asp:DropDownList> 
        </div> 

         <div class="form-group"> 
         <asp:label runat="server">Your best guess, how much do you owe on:</asp:label><br /> 
         <asp:label runat="server" >1st Mortgage:</asp:label> 
         <asp:textbox runat="server" type="text" class="form-control" placeholder="Amount"/> 
         </div> 
         <div class="form-group"> 
         <label>2nd Mortgage:</label> 
         <asp:textbox runat="server" type="text" class="form-control" placeholder="Amount"/> 
         </div> 

        <div class="form-group"> 
        <asp:label runat="server" >Have you filed bankruptcy:</asp:label> 
         <asp:dropdownlist runat="server" ID="bankruptcy" class="pull-right"> 
         <asp:listitem value="No" Text="No"></asp:listitem> 
         <asp:listitem value="Yes" Text="Yes"></asp:listitem> 
         </asp:dropdownlist> 
        </div> 

         <div class="form-group"> 
         <asp:label runat="server" >Please describe your situation (briefly):</asp:label><br /> 
         <asp:textbox runat="server" ID="situation" class="form-control"></asp:textbox> 
         </div> 

       </div> 
      <!-- END EXPANDED FORM SECTION -->    
        <asp:button runat="server" id="button" name="button" type="submit" text="Get Your E-Book Now" class="btn btn-primary btn-lg trackMe" data-trackerid="optin" OnClick="submitButton_Click"></asp:button> 
       <div class="center privacy"> 
        <small>100% Privacy Guaranteed</small> 
       </div> 
       </div> 

Answer 1

Когда элемент управления ASP имеет runat="server", он создает новый id для элемента, так что он может связать свой собственный обработчик JS для этой новой генерируемой id. Держу пари, если вы проверите этот элемент в браузере, его идентификатор не будет assist. Удалите runat="server", если вы на самом деле не выполняете обратный вызов сервера.

Answer 2

Положить showhide() внутри $(document).ready функция. В противном случае вы назначаете эффект переключения до того, как соответствующий входной элемент будет даже загружен.

$(document).ready(function() { 
    $("#assist").change(function() { 
       $("#expanded, #expanded2").toggle(); 
      }); 
    function showhide() { 
      $("#expanded, #expanded2").toggle(); 
     } 
    });