I have an href link in one page, when clicking I need to open a specific tab in another page. In the second page I have multiple tabs. In more detail:
Page 1
I'm using Django template tag with anchor to go to the page with the tabs. url is http://127.0.0.1:8000/payments#payments
<div class="shop-info">
<a href="{% url 'payments' %}#payments">
<div class="footer-links">Payments</div>
</a>
<div class="footer-links">Shipping</div>
<div class="footer-links">Returns</div>
</div>Page 2
$(document).ready(function(){
// get the tab from url
var hash = window.location.hash;
// if a hash is present (when you come to this page)
if (hash !='') {
// show the tab
$('.tabs a[href="' + hash + '"]').tab('show');
}
});<div data-duration-in="300" data-duration-out="100" class="tabs w-tabs">
<div class="tabs-menu w-tab-menu">
<a data-w-tab="Tab 1" class="tab-links w-inline-block w-tab-link">
<div>Payments</div>
</a>
<a data-w-tab="Tab 2" class="tab-links w-inline-block w-tab-link">
<div>Shipping</div>
</a>
</div>
<div class="tabs-content w-tab-content">
<div data-w-tab="Tab 1" class="payments-text w-tab-pane">
<div class="w-richtext">
{{ settings.payments|safe }}
</div>
</div>
<div data-w-tab="Tab 2" class="shipping-text w-tab-pane">
<div class="w-richtext">
{{ settings.shipping|safe }}
</div>
</div>
</div>I understand that in order for this to work i need to use some javascript however i'm not quite familiar. After reading a couple of similar issues I added following code in the page 2 but with no success:
<script>
$(document).ready(function(){
// get the tab from url
var hash = window.location.hash;
// if a hash is present (when you come to this page)
if (hash !='') {
// show the tab
$('.tabs a[href="' + hash + '"]').tab('show');
}
});
</script>
I get an error:
Uncaught TypeError: $(...).tab is not a function
at HTMLDocument.<anonymous> (payments:525)
at e (jquery-3.5.1.min.dc5e7f18c8.js?site=60411dcb7a606f33e31c3ee2:2)
at t (jquery-3.5.1.min.dc5e7f18c8.js?site=60411dcb7a606f33e31c3ee2:2)
Thank you