How to hide show the div on usercontrol using javascript

Question

I have to develop the functionality for the que and rply for that i have create the user contol as per my requirment as fallow and i have add the div with the text box for rely and submit button on user control and keep the div disply style to none and i call the javascript on reply link which shows the that div.

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="SuppReview.ascx.cs" Inherits="LaaFoodWebApp.SuppReview" %>

<div>
    <table style="width:100%;">
        <tr>
            <td rowspan="2" style="width: 15%; vertical-align: top;">
                <asp:Label ID="lblMsgType" runat="server"></asp:Label>
                <br />
                <asp:Label ID="lblMsgId" runat="server"></asp:Label>
            </td>
            <td style="width: 70%; vertical-align: top;">
                <asp:Label ID="lblMsgtBody" runat="server"></asp:Label>
            </td>
            <td style="width: 15%">
                <asp:Label ID="lblVDate" runat="server"></asp:Label>
                <br />
                By 
                <asp:Label ID="lblname" runat="server"></asp:Label>
            </td>
        </tr>
        <tr>
            <td>
                <a id="toggleReply" style="color: #15ADFF" href="#">Reply</a>
            </td>
            <td>
                <asp:Label ID="lblEmail" runat="server"></asp:Label>
                <br />
                <asp:Label ID="lblPhone" runat="server"></asp:Label>
            </td>
        </tr>
        <tr>
            <td>
                &nbsp;</td>
            <td>
            <panel id="pnlreply" >
               <div id="DivReply" style="display:none">
                <table style="width:100%;">
                    <tr>
                        <td style="width: 15%">
                           Replys</td>
                        <td>
                            <asp:TextBox ID="TextBox1" runat="server" Height="50px" TextMode="MultiLine" 
                                Width="100%"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            &nbsp;</td>
                        <td style="text-align: right">
                            <asp:Button ID="btnSubmit" runat="server" Text="Submit" 
                                onclick="btnSubmit_Click" />
                        </td>
                    </tr>
                    </table></div></panel>
            </td>
            <td>
                &nbsp;</td>
        </tr>
    </table>
</div>

But when i add those user control multiple time as per the count of replyes.

for (int i = 0; i< dt.Rows.Count; i++)
{
    SuppReview SR = (SuppReview)Page.LoadControl("SuppReview.ascx");
    SR.settxt(dt.Rows[i]);
    reviews.Controls.Add(SR);
}

on the page

<%@ Page Title="" Language="C#" MasterPageFile="~/SupplierMasterNew.Master" AutoEventWireup="true" CodeBehind="Supp_Views.aspx.cs" Inherits="LaaFoodWebApp.Supp_Views" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
 <script type="text/javascript">
     $(function () {
         $('#toggleReply').click(function () {
             $('#DivReply').toggle('slow');
             return false;
         });
     });
      </script>     
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="CPHcontent" runat="server">
    <div style="width: 100%; height: 24px; background-color: #D2EEF2; padding-top: 10px;
                font-size: large; color: #000000; text-align: left;">
        &nbsp;&nbsp;&nbsp; View</div>

    <asp:Panel ID="reviews" runat="server">

    </asp:Panel>
</asp:Content>

On clicking on reply link int hide show the div (Contain text box for rely and submit button) multiple time and it not work for the other entry

Answer 1

You have multiple duplicate IDs on your page if you are adding this control multiple times!

Consider changing the IDs to classes.

also give your outer div in your control a class! eg <div class="wrapper">

Declare a function:

function toggleReply(sender) {
    $(sender).parent('.wrapper').children('.DivReply').toggle('slow');
}

your link:

<a class="toggleReply" style="color: #15ADFF" href="javascript:void(0);" onclick="toggleReply(this);">Reply</a>