Question

im looking to select the follow element by id toggleThisDiv. The markup looks like:

 <li id="liCategory" runat="server">
       <asp:HyperLink ID="lnkCategory" runat="server">
       <span><asp:Literal ID="litCategory" runat="server" Visible="true" /></span>
       <asp:Image ID="imgMan" runat="server" Visible="false" /></asp:HyperLink>
       <asp:Button ID="btnToggleDiv" runat="server" Text="+" Visible="false" />
 </li>

 <div id="toggleThisDiv" runat="server" style="display:none;margin-top:-16px;">

And the jQuery:

$(document).ready(function () {
        $('[id*="btnToggleDiv"]').click(function () {
            $(this).next().slideToggle(100);
            return false;
        });
    });

This works when the button is outside of the listitem but this is all inside a repeater and if i leave it like that, all of the buttons created will be next to each other instead of within their associated list item.

I’m looking for something within jQuery that would allow me to select the next div (toggleThisDiv), is this possible?

Thankyou

Answer 1

Use unique ID’s, or classes if generating elements where the same identifier will be used.

To target an element outside the current parent of the clicked element you can find the closest parent that matches a selector, and then the next element etc.

$(document).ready(function () {
   $('[class*="btnToggleDiv"]').on('click', function () {
       $(this).closest('li').next('div').slideToggle(100);
       return false;
   });
});