Exclusive Div Toggle

slideToggle one div while slideUp the last that was toggled.

HTML

<div class="trigger">
    <div class="q">
      <div class="data-box" data-box="#bx-1">Heading 1</div>
    </div>
    <div id="bx-1"  class="box">Box 001 - Content</div>
</div>
<div class="trigger">
    <div class="q">
        <div class="data-box" data-box="#box-2">Heading 2</div>
    </div>
    <div id="box-2" class="box">Box 002 - Content</div>
</div>
<div class="trigger">
    <div class="q">
        <div class="data-box" data-box="#box-3">Heading 3</div>
     </div>
    <div id="box-3" class="box">Box 003 - Content</div>
</div>

CSS

.box {
    display: none;
    color:#333;    
    font-size:1em;
    border:1px solid #ccc;
    background:#ccc;
    padding:10px;
    margin:10px 0;
}

JavaScript

$(".trigger .q").click(function(){  
    var $siblingDivs = $($(this).siblings().find(".q .data-box"));
    
    $siblingDivs.each(function(){
        $($(this).data("box")).slideUp();
    });
    
    $($(this).find(".data-box").data("box")).slideToggle();

});