Show/Hide div in DataList with Jquery

Question

and I made a project with asp, but something is not working...I am trying to show/hide div which is inside of Datalist. But unfortunately is working only in first element, and the others element the div that I want to hide is appear.

here is my code:

`<script type="text/javascript">

    $(function () {
        $("#hiden").hide();
        $("#showddiv").on("click", function () {
            $("#hiden").toggle();
        });
    });

</script>
<div id="mainReferences">
    <asp:DataList ID="DataList1" runat="server" CellPadding="4" 
        ForeColor="#333333">
        <AlternatingItemStyle BackColor="#2E2E2E" />
        <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
        <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
        <ItemStyle BackColor="#151515" />
        <ItemTemplate>

           <table cellspacing="20">
           <tr>
           <td><a href="#" id="showddiv" class="fontText"  title="drop the div down"><img src='<%# Eval("Mainfoto") %>'  width="320px" height="290px" /> </a></td>
           <td width="400px"> 
               <asp:Label ID="Label1" class="FontText" Font-Bold="true" runat="server" Text="Përshkrimi:"></asp:Label><br />
               <asp:Label ID="Label2" width="400px" class="FontText" Font-Size="Large" runat="server" Text='<%# Eval("pershkrimi") %>' ></asp:Label></td>
           </tr>
           </table>


            <div id="hiden" class="categorry">             </div>  
        </ItemTemplate>
        <SelectedItemStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
    </asp:DataList>`

Answer 1

You're re-using id values in your HTML. This is invalid markup and will likely lead to undefined behavior (probably different by browser as well). Notice this element:

<div id="hiden" class="categorry">

Since this is essentially inside a loop (repeater, datalist, etc.) it's going to render multiple times to the page. Instead of an id, use a class:

<div class="hiden categorry">

Then just change your jQuery selector:

$('.hiden')

Of course, now you also need to specifically identify which element you want to toggle. You can do this by traversing the DOM a little bit from the clicked element. Something like this:

$(this).closest('div').find('.hiden').toggle();

This is an example, since I don't know the rendered markup resulting from your server-side code. Essentially the selector in .closest() should refer to whatever parent element wraps that particular datalist item in the markup. This basically looks for: The element which was clicked -> a common parent between it and the element you want to toggle -> the element you want to toggle.

(Naturally, this same fix will need to be applied anywhere else you're duplicating id values, which you do a couple of times in your code.)

ids have to be unique in the DOM. classes can be re-used.

Answer 2

$(document).ready(function () {
    $("#hiden").hide();

    $("#showddiv").on("click", function () {
        $("#hiden").toggle();
    });
});

You should try this.

Update:

Should be something like this:

<ItemTemplate>
    <table cellspacing="20">
        <tr>
            <td>
                <a href="#" class="showddiv" class="fontText"  title="drop the div down"><img src='<%# Eval("Mainfoto") %>'  width="320px" height="290px" /> </a>
            </td>
            <td width="400px"> 
                <asp:Label ID="Label1" class="FontText" Font-Bold="true" runat="server" Text="Përshkrimi:"></asp:Label><br />
                <asp:Label ID="Label2" width="400px" class="FontText" Font-Size="Large" runat="server" Text='<%# Eval("pershkrimi") %>' ></asp:Label>
            </td>
        </tr>
    </table>

    <div id="hiden" class="categorry">
    </div>
</ItemTemplate>


$(document).ready(function () {
    $(".categorry").hide();

    $(".showddiv").on("click", function () {
        $(this).closest('table').parent().find(".categorry").toggle();
    });
});