Question

I’m looping through a resultset which produces the following HTML:

 <tr>
    <td class="optionItems">
        Test<br />
        Test<br />
        <a href="#" class="description" >
            <img src="../../Images/Magnifying-Glass-icon.png"/>&nbsp;Description
        </a>
    </td>

    <td colspan="2" class="optionItemsLast">
        <input type="submit" value="Book" class="buttonGreen" />
    </td>
</tr>

<tr>
    <td colspan="3" class="optionItems">
        <div class="slidingDiv">
            Test><br />
        </div>
    </td>
</tr>

I have the following jQuery code to show/hide the div with the class name “slidingDiv”:

 $(".slidingDiv").hide();
        $(".description").show();

        $('.description').click(function () {
            $(".slidingDiv").slideToggle();
        });

When I click on any of the links with the “description” class name, all the divs show. I just want to only show the div corresponding the “description” link I clicked on.

I’ve tried something like this:

$('.description').click(function () {
            $(this).parent().children(".slidingDiv").slideToggle();
            //$(".slidingDiv").slideToggle();
        });

But with no success. Any help would be appreciated.

Answer 1

Try below code,

$('.description').click(function () {
     $(this)
        .closest('tr')       //get the closest tr
        .next()              //get the next row of that tr
        .find('.slidingDiv') //find .slidingDiv in next row
        .slideToggle()          
});    

Assumption: That 2 tr are related and .description closest tr’s next will be .slidingDiv‘s tr