Какой правильный селектор использовать для этого кода jQuery slideUp?

Question

Я использую Фонд для создания страницы, на которой у меня будет несколько свернутых кнопок. Когда вы нажимаете на кнопку, скрытый контент внутри нее сдвигается вниз, и если есть какие-либо расширенные кнопки, они сдвигаются вверх.

У меня это частично работает, но из-за того, что у меня есть пары кнопок по две, я не могу найти правильный селектор, чтобы закрывать расширенные элементы div независимо от того, где они расположены.

Вот мой 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;
    }

И Javascript:

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

Вот JSFiddle, чтобы продемонстрировать, что у меня есть до сих пор.

Answer 1

Вы можете добавить одну строку, чтобы позаботиться об этом:

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

Пример jsFiddle