Horizontal tabs dont show content - html

Question

Horizontal tabs html placed in a Moodle book, when you view this it doesnt show you the content i have placed in it, its just blank, when you click on the tab then you can see the content, but its like the initial view as the page is opened shows nothing, and once the tab is clicked on its viewable, but that is very annoying. Any help?
<!-- Start of horizontal tabs -->
<ul class="nav nav-pills mb-0" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active show" id="h-tabs-t1-tab" data-toggle="pill" href="#h-tabs-t1" role="tab" aria-controls="h-tabs-t1" aria-selected="true">ONE</a>
</li>
<li class="nav-item">
<a class="nav-link" id="h-tabs-t2-tab" data-toggle="pill" href="#h-tabs-t2" role="tab" aria-controls="h-tabs-t2" aria-selected="false">TWO</a>
</li>
<li class="nav-item">
<a class="nav-link" id="h-tabs-t3-tab" data-toggle="pill" href="#h-tabs-t3" role="tab" aria-controls="h-tabs-t3" aria-selected="false">THREE</a>
</li>
</ul>
<div class="tab-content card" id="pills-tabContent">
<div class="tab-pane p-3 fade active show" id="h-tabs-t1" role="tabpanel" aria-labelledby="h-tabs-t1-tab">
<h4>ONE</h4>
<p>Nisl vel pretium lectus quam id leo. Dolor purus non enim praesent elementum facilisis leo vel. Sit amet nulla facilisi morbi tempus. Facilisis volutpat est velit egestas dui id ornare. Est lorem ipsum dolor sit amet.</p>
</div>
<div class="tab-pane p-3 fade" id="h-tabs-t2" role="tabpanel" aria-labelledby="h-tabs-t2-tab">
<h4>TWO</h4>
<p>Sollicitudin ac orci phasellus egestas tellus rutrum. Commodo odio aenean sed adipiscing diam donec adipiscing tristique risus. </p>
</div>
<div class="tab-pane p-3 fade" id="h-tabs-t3" role="tabpanel" aria-labelledby="h-tabs-t3-tab">
<h4>THREE</h4>
<p>Aliquet enim tortor at auctor urna nunc id. Sem integer vitae justo eget magna fermentum.</p>
</div>
</div>
<!-- End of horizontal tabs -->

Answer 1

Did you include the jquery library script in the html?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
Also adding 'show' class in the divs wrapping the content of each tab too
<div class="tab-pane p-3 fade show"
id="h-tabs-t2"
role="tabpanel"
aria-labelledby="h-tabs-t2-tab">
<h4>TWO</h4>
<p>
Sollicitudin ac orci phasellus egestas tellus rutrum. Commodo odio
aenean sed adipiscing diam donec adipiscing tristique risus.
</p>
</div>