I recently utilized Bootstrap to create vertical tabs for my website.
My goal was to display additional text below the tab title only when that specific tab is active.
While I managed to achieve this, I encountered an issue where transitioning from one tab to another causes the page content to shift upwards.
Is there a way to resolve this issue without disrupting the layout of the page?
Example : https://jsfiddle.net/hm7n5bv4/
.filler {
background: cyan;
height: 600px;
}
.nav-pills .nav-link .tab_subtitle_hide {
font-size: 16px !important;
visibility: hidden;
height: 0;
opacity: 0;
transition: opacity 0.3s ease;
}
.nav-pills .nav-link.active .tab_subtitle_hide {
color: #fff;
visibility: visible;
height: auto;
opacity: 1;
transition: opacity 0.3s ease;
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="filler">Hello world</div>
</div>
<div class="row">
<div class="col-3 nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-for-teams-tab" data-toggle="pill" href="#v-pills-for-teams"
role="tab" aria-controls="v-pills-for-teams" aria-selected="false"><i
class="tab_i fad fa-users-class"></i>
<div class="tab_content">For Teams
</div>
<div class="tab_subtitle_hide">Similar to a hierarchical organization, Dummy text allows you to
structure
users.</div>
</a>
<a class="nav-link" id="v-pills-for-small-business-tab" data-toggle="pill"
href="#v-pills-for-small-business" role="tab" aria-controls="v-pills-for-small-business"
aria-selected="false"><i class="tab_i fad fa-store"></i>
<div class="tab_content">For small business
</div>
<div class="tab_subtitle_hide">Similar to a hierarchical organization, Dummy text allows you to
structure
users.</div>
</a>
<a class="nav-link" id="v-pills-for-enterprise-tab" data-toggle="pill" href="#v-pills-for-enterprise"
role="tab" aria-controls="v-pills-for-enterprise" aria-selected="true">
<div class="tab_content"><i class="tab_i fad fa-building"></i><span class="multi-company">For
enterprise</span><br></div>
<div class="tab_subtitle_hide">Similar to a hierarchical organization, Dummy text allows you to
structure
users.</div>
</a>
</div>
<div class="col-9 tab-content" id="v-pills-tabContent">
<div class="tab-pane active show" id="v-pills-for-teams" role="tabpanel"
aria-labelledby="v-pills-for-teams-tab">
<!--Start sub-tab1-->..0
<!--End sub-tab1-->
</div>
<div class="tab-pane" id="v-pills-for-small-business" role="tabpanel"
aria-labelledby="v-pills-for-small-business-tab">
<!--Start sub-tab2-->..1
<!--End sub-tab2-->
</div>
<div class="tab-pane" id="v-pills-for-enterprise" role="tabpanel"
aria-labelledby="v-pills-for-enterprise-tab">
<!--Start sub-tab3-->..2
<!--End sub-tab3-->
</div>
</div>
</div>