1

I use nav-tabs but I have a problem switching between tabs from link which are located inside the contents of tab 1. I want to switch from tab 1 to tab 3 clickin in this link instead of clicking the tab's title.

I've tried this solution (Under the hood, How to open a tab from external link?) but I get this error: "Uncaught TypeError: $ is not a function".

I'm using jquery 3.5.1 and bootstrap 4.4.1

    <ul class="nav nav-tabs" id="myTab" role="tablist">
     <li class="nav-item"><a class="nav-link active" id="pricing-tab" href="#pricing" data-toggle="tab" role="tab" aria-controls="pricing" aria-selected="true">Pricing</a></li>
     <li class="nav-item"><a class="nav-link" id="details-tab" href="#details" data-toggle="tab" role="tab" aria-controls="details" aria-selected="true">Details</a></li>
     <li class="nav-item"><a class="nav-link" id="booking-tab" href="#booking" data-toggle="tab" role="tab" aria-controls="booking" aria-selected="true">Booking</a></li>
    </ul>

    <div class="tab-content" id="myTabContent">
      <div class="tab-pane tab-bg fade show active" id="pricing" role="tabpanel" aria-labelledby="pricing-tab">
pricing tab content and <a href="#booking" Xdata-toggle="tab" class="tab-link">link to tab3</a>
      </div>
      <div class="tab-pane tab-bg fade" id="details" role="tabpanel" aria-labelledby="details-tab">details tab content</div>
      <div class="tab-pane fade" id="booking" role="tabpanel" aria-labelledby="booking-tab">booking tab content</div>
    </div>
  • Hi again:), could you provide your HTML in question please? Do you use JQuery within WordPress by chance? – bitski Nov 17 '21 at 11:17
  • It is not wordpress. I use a custom script for online booking which uses different jquerys –  Nov 17 '21 at 11:45

1 Answers1

0

If you are using JQuery with a tool that might include other JS libraries or frameworks, it is possible that conflicts occur due to several libraries using $.

Solution is to include JQuery like this:

jQuery(document).ready(function ($) {
  // your JQuery code
});
bitski
  • 1,168
  • 1
  • 13
  • 20
  • It works! No more errors and it is possible to switch tab from internal content link!! Thank you so much for your help bitski :) –  Nov 17 '21 at 11:50