I am using this code and it works on my Wordpress and Elementor site great: https://codepen.io/mooku/pen/BQZQwO
<div class="tabs-container">
<nav class="tabs">
<ul>
<li class="active" data-tab="tab-1">Sports</li>
<li data-tab="tab-2">Monogram</li>
<li data-tab="tab-3">Holiday</li>
</ul>
<div id="tab-1" class="tab-content current">
[product_category category="sports" per_page="9" columns="4" orderby="date" order="desc" operator="AND"]
</div>
<div id="tab-2" class="tab-content">
[product_category category="monograms" per_page="9" columns="4" orderby="date" order="desc" operator="AND"]
</div>
<div id="tab-3" class="tab-content">
[product_category category="holiday" per_page="9" columns="4" orderby="date" order="desc" operator="AND"]
</div>
$(document).on('click', 'li', function(){
$('li').removeClass('active');
$('ul').toggleClass('expanded');
$(this).addClass('active');
var tab_id = $(this).attr('data-tab');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$('#'+tab_id).addClass('current');
});
I put shortcodes in each tab so I can show my Woocommerce products by category. For some reason however when viewing it in mobile view as a condensed drop down, when I click on a product within a tab, the entire tab's content disappears, the dropdown menu expands, and is covered by content below it briefly before proceeding to the clicked products page. Everything is working besides that annoying error. I should note I did a test where I took out the shortcode and just put up links, and upon clicking those everything works fine, so the shortcodes are definitely to blame. Any way to fix this?
