I developed a bootstrap 4 nav-tabs bar with separate "main tabs" and "sub tabs" that slide out from the main tabs using jquery's animate() function. Check out the code snippet below:
CSS:
.nav-tabs .nav-item.main-item{
border-radius: 0px;
background: white;
}
.nav-tabs .nav-item.sub-item {
background: rgba(240,240,240,1);
margin-left: -5px;
}
HTML:
<ul class="nav nav-tabs">
<li class="nav-item main-item"><a class="nav-link active" data-toggle="tab" href="#main1"><b>Main 1</b></a></li>
<li class="nav-item main-item"><a class="nav-link" data-toggle="tab" href="#main2"><b>Main 2</b></a></li>
<li class="nav-item sub-item" main="#main1"><a class="nav-link" data-toggle="tab" href="#sub1">Sub 1</a></li>
<li class="nav-item sub-item" main="#main1"><a class="nav-link" data-toggle="tab" href="#sub2">Sub 2</a></li>
<li class="nav-item sub-item" main="#main1"><a class="nav-link" data-toggle="tab" href="#sub3">Sub 3</a></li>
<li class="nav-item sub-item" main="#main1"><a class="nav-link" data-toggle="tab" href="#sub4">Sub 4</a></li>
<li class="nav-item sub-item" main="#main1"><a class="nav-link" data-toggle="tab" href="#sub5">Sub 5</a></li>
<li class="nav-item main-item"><a class="nav-link" data-toggle="tab" href="#Main 3"><b>Plan</b></a></li>
<li class="nav-item main-item"><a class="nav-link" data-toggle="tab" href="#Main 4"><b>Simulate</b></a></li>
</ul>
JS: (jQuery)
$(".nav-tabs .nav-item.main-item").click(function (){
var hr = $(this).find(".nav-link").attr("href");
$(".nav-tabs .nav-item.sub-item:not([main="+hr+"])").stop().animate({width: 'hide'});
$(".nav-tabs .nav-item.sub-item[main="+hr+"]").stop().animate({width: 'show'});
});
While it functions correctly, I noticed that during the animation, the bar becomes distorted due to the "overflow: hidden" property set by jQuery for the animation. Refer to the images below:
Expanded: Nav-tabs sub items fully expanded
During Animation: Nav-tabs sub items during animation
It seems like the overflow: hidden introduces some hidden margins that push down other elements (the main tabs). I have tried various solutions, such as removing margins and setting elements to display: inline-block, but unfortunately, the issue persists.
I have spent several days attempting to rectify this problem without success, so I am hopeful that someone can provide assistance.
EDIT: Some individuals recommended adding overflow:hidden in the CSS to the sub-tabs. However, this resulted in the expanded state also being affected. For reference, please view the following example: Messed up expanded state