Tabs Not Working After Update to Pro 4.3.1

There is a console error (Uncaught TypeError: Cannot read property ‘addEventListener’ of null) on https://smartsolutions.net/ that is breaking the tabs from working.

Advice?

Hi @allcal,

I’ve taken a look and it looks like a issues related to some changes we’ve made in the toggle system used to power tabs, accordions, and many other things. The theme always expects to find these toggleable areas in pairs of a toggle (like a button, tab, or accordion header) along with an area to interact with.

I found this markup on your site. It’s inside the “Free On Site Evaluation” popup.

<div id="" class="e809-11 x-acc-item">
<div id="panel-e809-11" class="" role="tabpanel" aria-hidden="false" aria-labelledby="tab-e809-11" data-x-toggleable="e809-11" data-x-toggle-collapse="1">

This looks like the markup of an accordion item, but without the corresponding toggle. Perhaps this was copy and pasted from somewhere else at one point.

What’s happening is the toggle system finds that item but can’t proceed when it doesn’t find a toggle to go with it. This unfortunately stops the whole script from running which means tabs are never setup properly.

I’m sorry you’re running into this - it’s an edge case because the only way to have unpaired toggles would be cases like this where the markup is added by hand somewhere. I’ll look into the possibility of preventing the script from crashing in this case.

Meanwhile, I would recommend checking the content of that popup and removing the HTML above.

You were right, I must have copied content from inside a tab and pasted in the popup content area. When I removed the referenced html, everything is working properly. Thank you!

You are most welcome @allcal!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.