You need to make a tab-control so that the tabs open with the slideDown effect.
At the beginning all forms are hidden, press the "Form 1" button, a block with the slideDown effect slideDown , when you click the "Form 2" button, another form opens, closing the previous one. If you click on the same button twice, then just open - close the form (like toggleClass).
The question is - when I open the first form, then when I open the second one it opens from the bottom (and I would like it to open from the top). it turns out if you open the second form first and then the first one, then it opens from the top, but if otherwise, the second form opens from the bottom

It turns out if you first open the first and then the second (and subsequent), then they open from the bottom, if in the opposite direction, then from above

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'); } }); }

The function was written, since the number of tabs will grow in the future, so that it would be easier to track open tabs.

  • At first I wanted to use bootstrap collapse, but it also works there - veti4

1 answer 1

This option will suit?)

 $('.tab-item').on('click', function() { if (!$(this).hasClass('active')) { var tabIndex = $(this).index(); $('.tab-item.active').removeClass('active'); $(this).addClass('active'); // $('.tabs-content').slideUp('slow', function() { $('.tab-content.active').removeClass('active'); $('.tab-content').eq(tabIndex).addClass('active'); }).slideDown('slow'); console.clear(); console.info(tabIndex); } }); 
 .tabs { display: block; width: 100%; background: #ccc; border-bottom: 1px solid #aaa; } .tabs::after { content: ''; display: block; clear: both; } .tab-item { display: inline-block; float: left; border-right: 1px solid #aaa; padding: 10px 12px; cursor: pointer; } .tab-item.active { background: #aaa; } .tabs-content { display: block; width: calc(100% - 24px); padding: 10px 12px; background: #ccc; overflow: hidden; } .tab-content:not(.active) { display: none; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="tabs"> <div class="tab-item active">tab 1</div> <div class="tab-item">tab 2</div> <div class="tab-item">tab 3</div> <div class="tab-item">tab 4</div> <div class="tab-item">tab 5</div> </div> <div class="tabs-content"> <div class="tab-content active">tab content 1</div> <div class="tab-content">tab content 2</div> <div class="tab-content">tab content 3</div> <div class="tab-content">tab content 4</div> <div class="tab-content">tab content 5</div> </div>