Question

How do you find the next XX element in jquery? What I’m trying to achieve is that when someone clicks in one of the “event_details_arrow” class, the next “event_detail” class will show/hide.

This is my code, but at the moment is shows/hides all the event_detail classes whenever I click on any of the “event_details_arrow”.

    $(".event_details_arrow").bind("click", function () {
        $(".event_detail").slideToggle();
    });
                 <tr>
                    <td>yyy</td>
                    <td class="event_details_arrow"><span></span></td>
                    <td class="lastcol"><a href=""><span>Register</span></a></td>
                </tr>
                <tr class="event_detail">
                     <td colspan="3">text</td>
                 </tr>
                  <tr>
                    <td>yyy</td>
                    <td class="event_details_arrow"><span></span></td>
                    <td class="lastcol"><a href=""><span>Register</span></a></td>
                </tr>
                <tr class="event_detail">
                     <td colspan="3">text</td>
                 </tr>
                 <tr>
                    <td>yyy</td>
                    <td class="event_details_arrow"><span></span></td>
                    <td class="lastcol"><a href=""><span>Register</span></a></td>
                </tr>
                <tr class="event_detail">
                     <td colspan="3">text</td>
                 </tr>

Thanks

Answer 1

If you are sure about having one parent, you could use something like:

$(".event_details_arrow").bind("click", function () {
    $(this).parent().next().slideToggle();
});