CODEWITHSUNDEEP
javascriptjquery
user441365
user441365

Reputation: 4032

jquery show/hide element

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

Upvotes: 1

Views: 203

Answers (3)

ashish.chotalia
ashish.chotalia

Reputation: 3746

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

Upvotes: 0

Marnix
Marnix

Reputation: 6547

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

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

Upvotes: 2

Ross
Ross

Reputation: 17987

    $(".event_details_arrow").bind("click", function () {
            $(this).next(".event_detail").slideToggle();
        });
// or
    $(".event_details_arrow").bind("click", function () {
            $(this).closest(".event_detail").slideToggle();
        });

perhaps?

Upvotes: 0

Related Questions