jquery show/hide element
<p>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. </p>

<p>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".</p>

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

<p>Thanks</p>
