Targeting a bootstrap 4 tab panel from another page - html

Question

I want to open a tab panel on say a service.html page when i click a link on my index page. I'm working with bootstrap nav-pills and here's part of what I have tried already which didn't work.
service.html
<div class="nav flex-column nav-pills col-md-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<li class="nav-item">
<a class="nav-link list-group-item" id="v-pills-manpower-tab" data-toggle="pill" href="#v-pills-manpower" role="tab" aria-controls="v-pills-manpower" aria-selected="false">Manpower Support</a>
</li>
</div>
<div class="tab-content col-md-8" id="v-pills-tabContent">
<div class="tab-pane fade" id="v-pills-manpower" role="tabpanel" aria-labelledby="v-pills-manpower-tab">
<h5>Manpower Support</h5>
</div>
</div>
This is the link in my index.html file
Manpower
At the moment, this will only take me to the default services page but will not open the tab content which is what i want. What's the correct way to implement this?

Answer 1

Add the following code in your service.html
$(function(){
var tabPanelId = window.location.hash.substr(1).trim();
// tabPanelId will give your "v-pills-manpower" id
$("#"+tabPanelId").click();
});