此jQuery slideUp代码使用的正确选择器是什么？

Question

I am using Foundation to create a page where I will have multiple collapsed buttons. When you click on the button, the hidden content within it will slide down and if there are any expanded buttons they will slide up.

I have this partially working, but because I have the buttons in pairs of two I can't figure out the right selector to get the expanded divs to close regardless of where they're positioned.

Here is my HTML:

<div class="large-6 columns">
    <div class="box">
        Initial Content
        <div class="hidden">
            This is hidden content
        </div>
    </div>
    <div class="box">
        Initial Content
        <div class="hidden">
            This is hidden content
        </div>
    </div>
</div>

<div class="large-6 columns">
    <div class="box">
        Initial Content
        <div class="hidden">
            This is hidden content
        </div>
    </div>
    <div class="box">
        Initial Content
        <div class="hidden">
            This is hidden content
        </div>
    </div>
</div>

CSS:

.box {
    height:auto;
    background:#000;
    color:#fff;
    cursor:pointer;
    width:200px;
    margin-bottom:1em;
}
.hidden {
    height:200px;
    display:none;
}
    .hidden.open {
        display:block;
    }

And Javascript:

$(document).ready(function() {
    $('.box').click(function() {
        $(this).find('.hidden').slideToggle();
        $(this).siblings().find('.hidden').slideUp();
        return false;
    });
});

Here is a JSFiddle to demonstrate what I have so far.

Answer 1

You could add one line to take care of it:

$(this).parent().siblings().find('.hidden').slideUp();

jsFiddle example