I have 2 jQuery script in one page jQuery Dialog and jQuery slideToggle inside the dialog box, jQuery dialog is working but after hitting button to open jQuery Dialog inside the dialog box there will be a button to slideToggle a div but its not working I tried to move slideToggle outside the dialog and it works. I don't know whats going on inside the dialog box if someone can help me to solve my problem
jQuery Dialog
<script type="text/javascript"> $(function () { $("#dialog").dialog({ appendTo: "form", autoOpen: false, width: 630, height: 700, draggable: false, resizable: false, modal: true }); $("#btnaddnew").click(function () { $("#dialog").dialog("open"); return false; }); }); </script> jQuery slideToggle
<script type="text/javascript"> $(document).ready(function () { $("#Div1").hide(); $("#Button1").click(function () { $("#Div1").slideToggle(); return false; }); }); </script> dialog div + slideToggle div inside the jQuery dialog
<div id="dialog" title="Classification"> <asp:UpdatePanel ID="addpanel" runat="server"> <ContentTemplate> <table> <tr> <td><div id="registerform"> <table align="center" style="margin-top:10px" width="600"> <tr> <td> <asp:DropDownList ID="DropDownList1" runat="server" onselectedindexchanged="DropDownList1_SelectedIndexChanged" AutoPostBack="True"> <asp:ListItem Selected="True">Choose Classification</asp:ListItem> <asp:ListItem Value="Resident">Resident</asp:ListItem> <asp:ListItem Value="Business">Business</asp:ListItem> </asp:DropDownList> </td> </tr> </table> <table> <tr> <td><div id="divresident" runat="server" visible="false"> <table style="margin-top:10px; margin-bottom:10px"> <tr> <td width="300" style="text-align:left"><asp:Label ID="lbAddress" runat="server" Text="Address"></asp:Label></td> <td width="300"><asp:TextBox ID="txtAddress" class="basetxt" runat="server" Width="290"></asp:TextBox></td> </tr> <tr> <td style="text-align:left"><asp:Label ID="lbUserEntry" runat="server" Text="Number of House occupant"></asp:Label></td> <td><asp:TextBox ID="txtUserEntry" class="basetxt" runat="server" Width="290"></asp:TextBox></td> </tr> <tr> <td style="text-align:left"><asp:Button ID="btnAddOccupant" runat="server" Text="+" /> <asp:Label ID="lbres5" runat="server" Text="Add Occupant"></asp:Label></td> </tr> <tr> <td> <div id="divOccupantProfile" style="display: none"> <asp:Label ID="OPfamilyname" runat="server" Text="Family Name"></asp:Label> <asp:TextBox ID="textOPfamilyname" runat="server"></asp:TextBox><br /> <asp:Label ID="OPfirstname" runat="server" Text="First Name"></asp:Label> <asp:TextBox ID="textOPfirstname" runat="server"></asp:TextBox><br /> <asp:Label ID="OPmiddlename" runat="server" Text="Middle Name"></asp:Label> <asp:TextBox ID="textOPmiddlename" runat="server"></asp:TextBox><br /> <asp:Label ID="OPmaritalstatus" runat="server" Text="Marital Status"></asp:Label> <asp:DropDownList ID="ddlOPmaritalstatus" runat="server" > <asp:ListItem></asp:ListItem> <asp:ListItem>Married</asp:ListItem> <asp:ListItem>Single</asp:ListItem> <asp:ListItem>Divorced</asp:ListItem> </asp:DropDownList><br /> <asp:Label ID="OPoccupation" runat="server" Text="Occupation"></asp:Label> <asp:TextBox ID="textOPoccupation" runat="server"></asp:TextBox><br /> <asp:Label ID="OPrelationship" runat="server" Text="Relationship"></asp:Label> <asp:DropDownList ID="ddlOPrelationship" runat="server" > <asp:ListItem></asp:ListItem> <asp:ListItem>Wife</asp:ListItem> <asp:ListItem>Daughter</asp:ListItem> <asp:ListItem>Son</asp:ListItem> <asp:ListItem>Father</asp:ListItem> <asp:ListItem>Mother</asp:ListItem> <asp:ListItem>House helper</asp:ListItem> <asp:ListItem>Driver</asp:ListItem> </asp:DropDownList> </div> <div id="holder"> </div> </td> </tr> </table> </div></td> </tr> </table> <table> <tr> <td><div id="divbusiness" runat="server" visible="false"> <table width="600" style="margin-top:10px; margin-bottom:10px"> <tr> <td width="300" style="text-align:left"><asp:Label ID="lbbus1" runat="server" Text="Registered Business Name" ></asp:Label></td> <td width="300"><asp:TextBox ID="txtbus2" class="basetxt" runat="server" Width="290"></asp:TextBox></td> </tr> <tr> <td width="300" style="text-align:left"><asp:Label ID="lbbus3" runat="server" Text="Address"></asp:Label></td> <td width="300"><asp:TextBox ID="txtbus4" class="basetxt" runat="server" Width="290"></asp:TextBox></td> </tr> <tr> <td width="300" style="text-align:left"><asp:Label ID="lbbus5" runat="server" Text="Structure"></asp:Label></td> <td width="300"> </td> </tr> <tr> <td width="300" style="text-align:left"><asp:Label ID="lbbus6" runat="server" Text="SEC No./DTI number"></asp:Label></td> <td width="300"><asp:TextBox ID="txtbus7" class="basetxt" runat="server" Width="290"></asp:TextBox></td> </tr> <tr> <td width="300" style="text-align:left"><asp:Label ID="lbbus8" runat="server" Text="Nature of Business"></asp:Label></td> <td width="300"><asp:TextBox ID="txtbus9" class="basetxt" runat="server" Width="290"></asp:TextBox></td> </tr> <tr> <td colspan="2" style="text-align:left"> <div> <asp:Button ID="Button1" runat="server" Text="+" /> <asp:Label ID="Label1" runat="server" Text="Add Phone"></asp:Label> <div id="Div1" style="display: none"> <asp:Label ID="Label2" runat="server" Text="Landline work"></asp:Label> <asp:TextBox ID="TextBox1" class="basetxt" runat="server" ></asp:TextBox><br /> <asp:Label ID="Label3" runat="server" Text="Handphone personal" ></asp:Label> <asp:TextBox ID="TextBox2" class="basetxt" runat="server"></asp:TextBox><br /> <asp:Label ID="Label4" runat="server" Text="Handphone work"></asp:Label> <asp:TextBox ID="TextBox3" class="basetxt" runat="server"></asp:TextBox> </div> </div> </td> </tr> </table> </div></td> </tr> </table> </table> </ContentTemplate> </asp:UpdatePanel> </div> 
