target element not showing active class in tab-pane

Question

I have implemented tab using bootstrap, there are 3 tabs and each of them has contents in them, but while I am executing the code all the contents of active tab is not visible, content is visible only after any other tab is clicked, when checked on inspect element does not show active class.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="all-tab" data-toggle="tab" href="#all" role="tab" aria-controls="home" aria-selected="true">All</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Cash</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Miles</a>
  </li>
</ul>
<div class="tab-content pt-3" id="myTabContent">
  <div class="tab-pane fade show active" id="all" role="tabpanel" aria-labelledby="all-tab">
  Content.........                                    
  </div>
  <div class="tab-pane fade" id="home" role="tabpanel" aria-labelledby="home-tab">
  Content.........                                    
  </div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
  Content.........
  </div>
</div>

in inspect div element only shows three classes (class="tab-pane fade show") but not active class.

Answer 1

@conrad

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

add this script link to your shipify theme.liquid head section

 <a class="nav-link active" id="all-tab" data-toggle="tab"

the data toggle need a unique id you do not mention it

you put the same data-toggle change relevant tab id

Answer 2

You need to add active class to li tag and add in class inside first div which you need to display

Demo Code :

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <!--add active to li-->
  <li class="nav-item active">
    <a class="nav-link" id="all-tab" data-toggle="tab" href="#all" role="tab" aria-controls="home" aria-selected="true">All</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Cash</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Miles</a>
  </li>
</ul>
<div class="tab-content pt-3" id="myTabContent">
  <!--added class in-->
  <div class="tab-pane fade active in" id="all" role="tabpanel" aria-labelledby="all-tab">
    Content1.........
  </div>
  <div class="tab-pane fade" id="home" role="tabpanel" aria-labelledby="home-tab">
    Content2.........
  </div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
    Content3.........
  </div>
</div>