如何确保仅在单击相同元素时触发slidetoggle

Question

我有三个块，当一个块被点击时，div使用slideToggle滑动打开。当单击相同的块时，div将关闭，这将按预期工作，但如果单击第二个块，则会加载属于第二个块的数据，但它会立即向上滑动（关闭）。

如何确保只在单击同一个块两次时才关闭它，只在单击另一个块时切换数据/保持打开状态？

我的HTML：

<div class="col-md-4 col-sm-6 vk-clear-padding handmouse haven">
    <div class="vk-iconbox vk-iconbox-background text-center" style="background-color: #ececec;">
        <div class="iconbox-content vk-section-style-5">
          <h2 class="vk-heading text-uppercase" aria-label="01">
              <span>Haven & Industrie</span>
            </h2>
        </div>
    </div>
</div>
<div class="col-md-4 col-sm-6 vk-clear-padding handmouse openbaar">
    <div class="vk-iconbox vk-iconbox-background vk-iconbox-striped text-center" style="background-color: #faf5f5;">
        <div class="iconbox-content vk-section-style-5">
          <h2 class="vk-heading text-uppercase" aria-label="02">
              <span>Openbare Ruimte</span>
            </h2>
        </div>
    </div>
</div>
<div class="col-md-4 col-sm-6 vk-clear-padding handmouse landmeten">
    <div class="vk-iconbox vk-iconbox-background text-center" style="background-color: #ececec;">
        <div class="iconbox-content vk-section-style-5">
          <h2 class="vk-heading text-uppercase" aria-label="03">
              <span>Landmeten</span>
            </h2>
        </div>
    </div>
</div>
<div class="vk-what-we-do-section vk-section vk-section-style-2 vk-section-style-3 tabwrapper">

            </div>

我的jQuery：

$('.handmouse').on('click', function(e){
        var alias = $(this).attr("data-attribute");
        $.post("ajax/blokken.php", {
          dienstnaam : alias
        }, function(data) {
            $(".tabwrapper").html(data);
            MasonryItem.init();
        });
        $('.tabwrapper').slideToggle();
        $('html, body').animate({
            scrollTop: $(".tabwrapper").offset().top
        }, 2000);
    });

这三个街区都可以通过他们的最后一个班级（避风港，露天广场，土地）来识别。