Tab контрол с эффектом collapse работает не правильно

Нужно сделать tab-control , чтобы вкладки открывались с эффектом slideDown.
В начале все формы скрыты , нажимаем кнопку "Форма 1", открывается блок с эффектом slideDown, при нажатии кнопки "Форма 2" открывается другая форма, закрывая предыдущую. Если нажимать на одну и ту же кнопку два раза, то просто открыть - закрыть форму (типа toggleClass).
Вопрос такой,- когда я открываю первую форму, то при открытии второй она открывается снизу (а хотелось бы что бы она открывалась сверху). получается если открыть сначала вторую форму , а затем первую, то она открывается сверху, но если иначе, то вторая форма открывается снизу

Получается если открывать сначала первую потом вторую (и последующую), то они снизу открываются, если же в обратном направлении, то сверху

css

.tab-collapse-first, .tab-collapse-second,.tab-collapse-three{
    display: none;
}

HTML

<div class="col-lg-12 col-xl-12 col-md-12 col-12 p-0">
    <div class="button-wrapper-main">
        <a class="first-btn-tab btn-tab" data-target="first">Форма 1</a>
        <a class="second-btn-tab btn-tab" data-target="second">Форма 2</a>
        <a class="three-btn-tab btn-tab" data-target="three">Форма 3</a>
    </div>
</div>
<div class="col-lg-12 col-xl-12 col-md-12 col-12 p-0">
    <div class="tab-collapse-first tab-collapse">
        <p>ПЕРВАЯ ФОРМА ПЕРВАЯ ФОРМА ПЕРВАЯ ФОРМА ПЕРВАЯ ФОРМА ПЕРВАЯ ФОРМА ПЕРВАЯ ФОРМА ПЕРВАЯ ФОРМА ПЕРВАЯ ФОРМА ПЕРВАЯ ФОРМА ПЕРВАЯ ФОРМА ПЕРВАЯ ФОРМА ПЕРВАЯ ФОРМА ПЕРВАЯ ФОРМА</p>
    </div>
    <div class="tab-collapse-second tab-collapse">
        <p>ВТОРАЯ ФОРМА  ВТОРАЯ ФОРМА  ВТОРАЯ ФОРМА  ВТОРАЯ ФОРМА  ВТОРАЯ ФОРМА  ВТОРАЯ ФОРМА  ВТОРАЯ ФОРМА  ВТОРАЯ ФОРМА  ВТОРАЯ ФОРМА  ВТОРАЯ ФОРМА  ВТОРАЯ ФОРМА  ВТОРАЯ ФОРМА</p>
    </div>
    <div class="tab-collapse-three tab-collapse">
        <p>Третья форма Третья форма Третья форма Третья форма Третья форма Третья форма Третья форма Третья форма Третья форма Третья форма Третья форма Третья форма Третья форма </p>
    </div> 
</div>

js

$('.btn-tab').on('click',function(){
    target = $(this).attr('data-target');
    current_selector = '.tab-collapse-'+target;
    if ($(current_selector).hasClass('show-collapse')){
        $(current_selector).removeClass('show-collapse');
        $(current_selector).slideUp('fast');
    }
    else{
        hide_collapse();
        $(current_selector).addClass('show-collapse');
        $(current_selector).slideDown('fast');
    }
})
function hide_collapse(){
    $('.tab-collapse').each(function(){
        if ($(this).hasClass('show-collapse')){
            $(this).removeClass('show-collapse');
            $(this).slideUp('fast');
        }
    });
}

Функцию написал , так как количество вкладок в будущем будет расти , что бы было легче отслеживать открытые вкладки