I want to use bootstrap tabs in the sidebar on my website, but I can't use it because unfortunately it doesn't work when I put tabs in the related sidebar-parsel-liste class.
When I add the tabs tags in the code anywhere outside of the sidebar-parcel-list class, the code works fine and I can switch between tabs.
MY CODES;
<div id="sidebar-parsel-liste" class="sidebar-parsel-liste">
<div class="card m-0">
<div style="display: flex; justify-content: space-between; align-items: center;">
<h4 class="card-title"> <i class="ti-angle-left"
style="padding-right: 4px; font-size: 14px; cursor: pointer;"></i>Parsel
Kartı</h4>
<button type="button" class="btn btn-success btn-sm"
onclick="showSuccessAlert()">Kaydet</button>
</div>
<hr>
<!-- sidebar butonlar -->
<div class="button-list">
<button type="button" class="btn btn-sm btn-info m-b-10 m-l-5">Bina</button>
<button type="button" id="degerlemeKarti"
class="btn btn-sm btn-info m-b-10 m-l-5">Değerleme</button>
<button type="button" class="btn btn-sm btn-info m-b-10 m-l-5">Mülk Bilgi</button>
<button type="button" class="btn btn-sm btn-info m-b-10 m-l-5">Rapor</button>
<button type="button" class="btn btn-sm btn-info m-b-10 m-l-5">Takbis</button>
</div>
<!-- navbar başlangıcı tabs -->
<div class="card-body">
<h4 class="card-title m-b-40">Tab with dropdown</h4>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item"> <a class="nav-link" id="home-tab" data-toggle="tab"
href="#home5" role="tab" aria-controls="home5" aria-expanded="true"
aria-selected="false"><span class="hidden-sm-up"><i
class="ti-home"></i></span> <span
class="hidden-xs-down">Home</span></a> </li>
<li class="nav-item"> <a class="nav-link" id="profile-tab" data-toggle="tab"
href="#profile5" role="tab" aria-controls="profile"
aria-selected="false"><span class="hidden-sm-up"><i
class="ti-user"></i></span> <span
class="hidden-xs-down">Profile</span></a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle active" data-toggle="dropdown" href="#"
role="button" aria-haspopup="true" aria-expanded="false">
<span class="hidden-sm-up"><i class="ti-email"></i></span> <span
class="hidden-xs-down">Dropdown</span>
</a>
<div class="dropdown-menu" x-placement="bottom-start"
style="position: absolute; transform: translate3d(0px, 39px, 0px); top: 0px; left: 0px; will-change: transform;">
<a class="dropdown-item active show" id="dropdown1-tab" href="#dropdown1"
role="tab" data-toggle="tab" aria-controls="dropdown1"
aria-selected="true" aria-expanded="true">@fat</a> <a
class="dropdown-item" id="dropdown2-tab" href="#dropdown2" role="tab"
data-toggle="tab" aria-controls="dropdown2">@mdo</a> </div>
</li>
</ul>
<div class="tab-content tabcontent-border p-20" id="myTabContent">
<div role="tabpanel" class="tab-pane fade" id="home5" aria-labelledby="home-tab">
<p>0</p>
</div>
<div class="tab-pane fade" id="profile5" role="tabpanel"
aria-labelledby="profile-tab">
<p>1</p>
</div>
<div class="tab-pane fade active show" id="dropdown1" role="tabpanel"
aria-labelledby="dropdown1-tab">
<p>2</p>
</div>
<div class="tab-pane fade" id="dropdown2" role="tabpanel"
aria-labelledby="dropdown2-tab">
<p>3</p>
</div>
</div>
</div>
</div>
how can i solve this problem?
<ul class="nav nav-pills" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" role="tab" aria-controls="home-tab-pane" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link " id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" role="tab" aria-controls="profile-tab-pane" aria-selected="true">Profile</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#tab1" id="tab1-tab" data-bs-toggle="tab" data-bs-target="#tab1-tab-pane" role="tab" aria-controls="tab1-tab-pane" aria-selected="true">Tab 1</a></li>
<li><a class="dropdown-item" href="#tab2" id="tab2-tab" data-bs-toggle="tab" data-bs-target="#tab2-tab-pane" role="tab" aria-controls="tab2-tab-pane" aria-selected="true">tab 2</a></li>
</ul>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">Home</div>
<div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">Profile</div>
<div class="tab-pane fade" id="tab1-tab-pane" role="tabpanel" aria-labelledby="tab1-tab" tabindex="0">Tab 1</div>
<div class="tab-pane fade" id="tab2-tab-pane" role="tabpanel" aria-labelledby="tab2-tab" tabindex="0">Tab 2</div>
</div>
This demo code in work bootstrap tab feature and,
I am using Bootstrap 5.3 and this code should solve your problem.
Thanks.