Find og luk div

Jeg har flg.

$('.top').on('click', function() {
        $parent_box = $(this).closest('.box');
        $parent_box.siblings().find('.bottom').hide();
        $parent_box.find('.bottom').toggle();
    });

OG.....

<div class="container">
  <div class="row">
    <h2>Responsive Grid</h2>
    <hr>
    <section id="pinBoot">
      <article class="white-panel"><img src="http://i.imgur.com/sDLIAZD.png" alt="">
        <h4><a href="#">Title 1</a></h4>
        <p>Lorem ipsum dolor.</p>

                    <div class="box">
                    <div class="top">
                      <span class="label label-primary">1</span>
                  <span class="label label-primary">2</span>
                  <span class="label label-primary">3</span>
                  <span class="label label-primary">4</span>
                  <span class="label label-primary">5</span>
                  <span class="label label-primary">6</span>
                    </div>
                    <div class="bottom">
                      Bestillingsformen
                    </div>
                  </div>
<p>
  test skriv inden anden box kommer op
</p>
<div class="box">
<div class="top">
  <span class="label label-primary">1</span>
<span class="label label-primary">2</span>
<span class="label label-primary">3</span>
<span class="label label-primary">4</span>
<span class="label label-primary">5</span>
<span class="label label-primary">6</span>
</div>
<div class="bottom">
  Bestillingsformen
</div>
</div>
      </article>

      <article class="white-panel"> <img src="http://i.imgur.com/8lhFhc1.gif" alt="">
        <h4><a href="#">Title 2</a></h4>

          <div class="box">
          <div class="top">
            <span class="label label-primary">1</span>
        <span class="label label-primary">2</span>
        <span class="label label-primary">3</span>
        <span class="label label-primary">4</span>
        <span class="label label-primary">5</span>
        <span class="label label-primary">6</span>
          </div>
          <div class="bottom">
            Tilmeldingsform kommer her....
          </div>
        </div>
        <p>Excepteur sint occaecat.</p>
      </article>
     
      </section>
      </div>
            </div>

Når man klikker på .top så åbner .bottom, og andre .bottom der måtte være åbne lukker, men kun inden for den aktuelle <article> ?

Ideen er at der kun må være en .bottom åben på siden af gangen, men det kan jeg ikke få til at fungere.. :-(

Hvad skal der til ?