jquerythisslidetoggle

jquery get next div called moreProductsBox and slideToggle it open

Trying to get access to the next available div after the a link that i click, with a class of moreProductsBox and then slideToggle it open.

This is what i have now:

Link:

<div class="productContent">
<p><a href="#" onclick="return false;"  class="viewMoreProducts">View Related Products </a></p>
</div>
<div class="productSelectBar">
<div class="selectBar">
</div>
</div>

<!-- View More Products Box -->
<div class="moreProductsBox" style="display:none;">
</div>

Jquery is:

// Show Hidden Product Boxes on Expand  
$(".viewMoreProducts").click(function() {
    $(this).nextAll(".moreProductsBox:first").slideToggle()
};

*Updated markup to be more clear

Solution

  • the only way for me to access that next div with the class moreProductsBox was to do:

    $(this).parent().parent().parent().find(".moreProductsBox:first").slideToggle();

    The other suggestions that were given didn't work.