jquery find closest element to click

Question

I am trying to triggger show/hide effect when a link is clicked on my page, the way my page is setup is that I have the following HTML,

<div class="results clearfix">
        <div class="product">
            <div class="media">

            </div>
            <div class="information">
                <div class="name">A Product</div>
                <a href="">€50</a>
            </div>
        </div>
        <div class="product">
            <div class="media">

            </div>
            <div class="information">
                <div class="name">A Product</div>
                <a href="">€50</a>
            </div>
        </div>
        <div class="product">
            <div class="media">

            </div>
            <div class="information">
                <div class="name">A Product</div>
                <a href="">€50</a>
            </div>
        </div>
        <div class="product">
            <div class="media">

            </div>
            <div class="information">
                <div class="name">A Product</div>
                <a href="">€50</a>
            </div>
        </div>
        <div class="moreWrapper">
            <div class="more">
                <div class="arrow"></div>
                <div class="media">
                    <img src="assets/css/img/more-image.jpg" />
                    <a class="view" href="">View item</a>
                </div>
                <div class="details">
                    <a class="cart" href="">€50</a>
                        <a class="bookmark" href=""></a>
                        <div class="clearfix"></div>
                        <div class="breakdown clearfix">
                            <h1>ÖRSJÖ BELYSNING PJ DESK LAMP</h1>
                            <small>Item Number : UL-1027</small>
                            <dl>
                                <dt>Manufacturer</dt>
                                <dd><img src="assets/img/alessi-logo.jpg"/></dd>
                            </dl>
                            <dl>
                                <dt>Created By</dt>
                                <dd>
                                    <img src="assets/img/created.jpg" alt="" />
                                    <strong>3d_alan</strong>
                                    <span>on 27th Jan 2013</span>
                                </dd>
                            </dl>
                            <dl>
                                <dt>Method of creation</dt>
                                <dd>
                                    <i class="creation icon-camera"></i>
                                    <i class="creation icon-hands"></i>
                                    <i class="creation icon-pencil"></i>
                                    <i class="creation icon-fullscreen"></i>
                                    <i class="creation icon-pencil"></i>
                                    <i class="creation icon-photo"></i>
                                </dd>
                            </dl>
                            <dl>
                                <dt>Year of manufactuer</dt>
                                <dd>1990</dd>
                            </dl>
                        <p><em>Available Formats</em> <a href="">Require a different format?</a></p>
                        <ul class="formats">
                            <li>3DSMax</li>
                            <li>VRay</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="product">
            <div class="media">

            </div>
            <div class="information">
                <div class="name">A Product</div>
                <a href="">€50</a>
            </div>
        </div>
        <div class="product">
            <div class="media">

            </div>
            <div class="information">
                <div class="name">A Product</div>
                <a href="">€50</a>
            </div>
        </div>
        <div class="product">
            <div class="media">

            </div>
            <div class="information">
                <div class="name">A Product</div>
                <a href="">€50</a>
            </div>
        </div>
        <div class="product">
            <div class="media">

            </div>
            <div class="information">
                <div class="name">A Product</div>
                <a href="">€50</a>
            </div>
        </div>
        <div class="moreWrapper">
            <div class="more"></div>
        </div>
    </div>

After every 4 .product elements there is a .moreWrapper and then 4 more .product elements and then another .moreWrapper . What I am struggling to achieve is getting the closest .moreWrapper to the clicked element to open, currently all .moreWrapper open.

Here is my current javascript,

$(".product").click(function(e){
    $(this).find("a").addClass("set");
    var x = $(this).position().left;
    $(this).parent().find('.moreWrapper').css("display", "none").animate({
        "height" : "0px",
    }, 1000);
    $(this).parent().find('.moreWrapper').css("display", "block").animate({
        "height" : "500px",
    }, 1000);
    $(".arrow").css("left", x+"px");

    return false
});

Answer 1

Try this:

$(".product").click(function(e){
    $(this).find("a").addClass("set");
    var x = $(this).position().left;
    $(this).parent().find('.moreWrapper').css("display", "none").animate({
        "height" : "0px",
    }, 1000);
    $(this).parent().find('.moreWrapper').next().css("display", "block").animate({
        "height" : "500px",
    }, 1000);
    $(".arrow").css("left", x+"px");
return false;
});

I gess this is what you need, just to hide the current .moreWrapper , and show the next .moreWrapper after it.