EDIT: See this code pen for an example of what's wrong: http://codepen.io/sdejaneiro/pen/MKZeov?editors=1010
Also, please note I am not trying to target mobile devices with my code. I am trying to target desktop computer browser screen sizes. Creating code to target mobile devices will not resolve the issue I'm having.
Click on any of the tabs and then shrink the screen. You will see that the tab selected no longer has the blue background color to show it's selected. That same thing happens if you click a tab in the smaller screen view and expand the screen--you will not see the tab highlighted anymore. That is the problem I'm trying to solve.
Yes, I know this is a very odd idea--going from a ul list tab setup to a div accordion setup is not a recommended approach. However, this is not my call to make. Then again, maybe what I am asking is not possible considering this scenario? If that is the case then I am fine with that.
This is what I have so far but it doesn't maintain the active state from desktop to mobile and mobile to desktop:
(function($) {
$(document).ready(function() {
// tabbed content on product detail page
if ($('.tabs').length) {
$('.tabs li').each(function(i, n) {
$(n).bind('click', function(e) {
e.preventDefault();
$('.tabs .active').removeClass('active');
$($('.tabs li')[i]).addClass('active');
//call to toggleTab function with class of current .tab li item
});
});
}
//mobile SDS tab navigation
$('.tab-link-wrap').each(function(i, n) {
$(n).bind('click', function(e) {
e.preventDefault();
$('.activeLink').removeClass('activeLink');
$($('.tab-link-wrap')[i]).addClass('activeLink');
//call to toggleTab function with class of current tab-link-wrap div
});
});
});
//Toggle the active state of the tabs from mobile -> desktop and desktop->mobile
function toggleTab(num) {
$(".tab-link-wrap").find("#" + num).toggleClass("activeLink");
$(".tabs").find("#" + num).toggleClass("active");
}
}(jQuery));