Magento 2 – How to Find jQuery Tabs Conflict

htmljavascriptmagento2

I am using Magento 2 EE. When I press on a tab link inside a block in the home page, the next tab becomes invisible. The handler is adding this code:

aria-expanded="false" style="display: none;"

to the next tab.

This is the code for the navigation tabs: 

<ul class="nav nav-tabs">
  <li class="active"><a href="#featured" data-toggle="tab">New Arrivals</a></li>
  <li><a href="#new-arrivals" data-toggle="tab">Bestsellers</a></li>
  <li><a href="#most-viewed" data-toggle="tab">Most Viewed</a></li>
</ul>

And this is the code for one tab after pressing the tab next to it:

<a href="#most-viewed" data-toggle="tab" aria-expanded="false" style="display: none;">Most Viewed</a>

I used Visual Event for java script to debug the issue. I found that the click event is calling the following function from the live bootstrap.min.js v 3.3.6:

function (c){c.preventDefault(),b.call(a(this),"show")}

The are no errors in the console.

Any help to solve the issue?

Best Answer

I often use chrome dev tools to help debugging in this situation. You can search by class in the dom by just clicking CTRL + F in the elements tab. This will show any code on page however i couldn't find anything related to those classes on this page itself.

You can also see what scripts are run when you perform an action like click by clicking memory tab click start for Record Allocation Profile and then click your tab and then click stop. This will show the functions and the files which were used during that action. This did not help me in this case however as everything seemed bootstrap and jquery related and nothing stood out as being out of the ordinary. There may be a better way of doing this as you seem to have tried something similar.

You can also search all external scripts by clicking 3 dots in top right of chrome dev tools and selecting search all files. I searched for any files with the classes nav-tabs ect however nothing in js came up just css but thought this may help you debug.

While taking a look i noticed is this only happens to the a elements. I changed them to div's and all worked and they weren't being hidden so not sure if this will help you narrow down what is causing this.

This is all being handled by bootstrap however as setting the class and data-toggle="tab" should be enough to make this work within markup alone and no additional JS should of been needed to make this work but there must be a conflict somewhere that causes this.

Other than that here is my workaround if you can't find the issue.

Add below to CSS to override the style that is being set:

ul.nav.nav-tabs a { display: block !important; }
Related Topic