James James - 4 months ago 11
jQuery Question

jQuery tabs not working in mobile - custom code

I have just noticed that on mobile and when resized to mobile my tabs are not clicking and changing and wondering if anyone can see why?

I created a fiddle here: https://jsfiddle.net/a6k70p0L/2/

Works fine in desktop view, but when resized the click events does seem to fire and change.. appreciate an help. Little new to JS so a little stuck.

JS:

$(document).ready(function() {

var originalTabs = $('.originalTabs').html();

function clearTabs(){
$('.originalTabs').html(originalTabs);
}

//clearTabs();
//desktopTabs();

function desktopTabs(){
clearTabs();

// cretate tabs for desktop
var headers = $("#tab_description h6");

$('#tab_description h6').each(function(i){
$(this).nextUntil("h6").andSelf().wrapAll('<div class="tab" id="tab-'+i+'"/>');
});

for( var i = 0; i < headers.length; i++ ) {
$('.tabs').append('<li class=""><a href="#tab-'+i+'">'+headers[i].innerHTML+'</a></li>');
}

$('ul.tabs').each(function(){
var active, content, links = $(this).find('a');
var listitem = $(this).find('li');
active = listitem.first().addClass('active');
content = $(active.attr('href'));
$('.tab').hide();
$(this).find('a').click(function(e){
$('.tab').hide();
$('ul.tabs li').removeClass('active');
content.hide();
active = $(this);
content = $($(this).attr('href'));
active.parent().addClass('active');
content.show();
return false;
});
});

headers.remove(); // remove headers from description
$('#tab-0').show(); // show the first tab
}

function mobileTabs(){
clearTabs();

//alert("loaded mobile");

var headers = $("#tab_description h6");

$(headers).each(function(i) {
$(this).append('<a href="#accordion_'+(i+1)+'" id="accordion_'+(i+1)+'"></a>');
//$(this).nextUntil("h6").andSelf().wrapAll('<div class="aTab" id="tab-'+i+'"/>');
});

$('#tab_description h6').first().trigger('click').addClass("active");
$('#tab_description h6').first().nextUntil("h6").show();
}

var tabClick = function() {

//alert("clicked");
var accordionContent = $('#tab_description p, #tab_description ul, #tab_description table, #tab_description iframe, #tab_description div');

$('#tab_description h6').removeClass("active");
if (!$(this).hasClass("active")){
$(this).addClass("active");
}

// Check if current accordion item is open
var isOpen = $(this).next().is(":visible");

// Hide all accordion items
accordionContent.hide();

// Open accordion item if previously closed
if (!isOpen) {
$(this).nextUntil('h6').show();
}

// Disabled to stop on mobile auto scrolling down to product description when clicking through...
$('html, body').animate({
scrollTop: $(this).offset().top - 15
}, 2000);

return false;
}

//bind to resize
$(window).resize( function() {
if(isMobileLandscapeOnly.matches || isTabletLandscapeOnly.matches){
desktopTabs();
$('#tab_description h6').on("click, touchstart", tabClick);

} else if(isMobilePortraitOnly.matches || isTabletPortraitOnly.matches){
mobileTabs();
$('#tab_description h6').on("click, touchstart", tabClick);

} else if(isDesktop) {
desktopTabs();
}
});

//check for the orientation event and bind accordingly
window.addEventListener("orientationchange", function() {
if(isMobileLandscapeOnly.matches || isTabletLandscapeOnly.matches){
desktopTabs();
$('#tab_description h6').on("click, touchstart", tabClick);

} else if(isMobilePortraitOnly.matches || isTabletPortraitOnly.matches){
mobileTabs();
$('#tab_description h6').on("click, touchstart", tabClick);

} else if(isDesktop) {
desktopTabs();
}
}, false);

if(isMobileLandscapeOnly.matches || isTabletLandscapeOnly.matches){
//alert("Mobile / Tablet (Portrait)");
desktopTabs();
$('#tab_description h6').on("click, touchstart", tabClick);

//console.log(originalTabs);
} else if(isMobilePortraitOnly.matches || isTabletPortraitOnly.matches){
//alert("Mobile / Tablet (Portrait)");
mobileTabs();
$('#tab_description h6').on("click, touchstart", tabClick);

} else if(isDesktop) {
//alert("Desktop");
desktopTabs();
}

});

Answer

Wrap your $('ul.tabs').each... in function and call the function when you have done all your appending of a/h6 tags in mobile. Or call your appending functions before the each statement.

The each statement fires and applies to everything that is currently available in the DOM, as your appending function hasn't started yet...the each statement doesn't know it's there. Then your appending stuff happens in your mobile functions and the each statement doesn't know it exists(as it is fired before the mobile functions).

Edit - Working Answer

Check the updated fiddle here: https://jsfiddle.net/a6k70p0L/6/

I've mentioned my changes in the comment below.

Comments