Question

I have a repeater and there is a div and button inside it.
But as you know in repeater ids are changed. Like
ctl00_ContentPlaceHolder1_rptToogle_ctl00_btnToogle
ctl00_ContentPlaceHolder1_rptToogle_ctl01_btnToogle
ctl00_ContentPlaceHolder1_rptToogle_ctl02_btnToogle

That code is working but it’s working for all. I mean when I click every div is opening.
I just want to open I selected, not all of them. How can I fix it?

<script type="text/javascript">
    $(document).ready(function () {
        $('[id*="btnToogle"]').click(function () {
            $('[id*="divToogle"]').slideToggle(100);
            return false;
        });
    });
</script>

<asp:Repeater id="rptToogle" runat="server">
    <ItemTemplate>
        <asp:Button id="btnToogle" runat="server" Text=""></asp:Button>
        <div id="divToogle" runat="server" style="display:none;">
             asdasd, asdasd, asdasd
        </div>
    </ItemTemplate>
</asp:Repeater>

Answer 1

You are creating multiple divs with the id=”divToggle”. Technically speaking you really shouldn’t do this as it is invalid markup to have the different DOM elements with the same ids (although browsers will allow it).

You can select the current button by using $(this) and then you can leverage jquery’s next() selector to get the div next to the button like this:

<script type="text/javascript">
    $(document).ready(function () {
       $('[id*="btnToogle"]').click(function () {
            //select the very next sibling of this button, which we know is the div
            $(this).next().slideToggle(100);
            return false;
        });
    });
</script>

Please note, however, that using next() can be dangerous if you start editing your markup, because it is a relative selector, not absolute (it gets the next element, not a specific element by id).