Loads Elementor's tab widget on mobile with all tabs collapsed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
let intViewportWidth = window.innerWidth; | |
console.log('🔔 intViewportWidth = ', intViewportWidth ); | |
const activeClass = 'ele-active'; | |
const mobileBreakpoint = '767'; // Our breakpoint ensures this code only runs on small screens. | |
const mobileTabButtons = document.querySelectorAll('.elementor-tab-mobile-title'); | |
if( intViewportWidth <= mobileBreakpoint ){ | |
/** | |
* Click handling for Tab buttons. | |
* | |
* @param {Object} Tab button element. | |
* | |
* @return {undefined} | |
*/ | |
const tabClickHandler = function( tabButton ){ | |
let buttonName = tabButton.textContent; | |
console.log(`\n👋 "${buttonName}" was clicked.`); | |
let thisContent = tabButton.nextElementSibling; | |
if( tabButton.classList.contains( activeClass ) || thisContent.classList.contains('elementor-active') ){ | |
console.log(`\t☑️ Deactivating "${buttonName}" button.`); | |
tabButton.classList.remove( activeClass ); | |
console.log(`\t☑️ Hiding "${buttonName}" content.`); | |
thisContent.classList.remove('elementor-active'); | |
thisContent.style.display = 'none'; | |
thisContent.setAttribute('hidden', 'hidden'); | |
} else { | |
removeActiveClass(); // "Zero out" all tab buttons. | |
console.log(`\t✅ Activating "${buttonName}" button.`); | |
tabButton.classList.add( activeClass ); | |
console.log(`\t✅ Showing "${buttonName}" content.`); | |
thisContent.classList.add('elementor-active'); | |
thisContent.style.display = 'block'; | |
thisContent.setAttribute('hidden', ''); | |
} | |
} | |
/** | |
* Removes the $activeClass from all buttons. | |
*/ | |
const removeActiveClass = function(){ | |
console.log(`🔔 Removing .${activeClass} from all tab buttons...`) | |
mobileTabButtons.forEach(function(mobileTabButton){ | |
mobileTabButton.classList.remove( activeClass ); | |
}); | |
} | |
// Apply click handling to the Tab buttons | |
if( mobileTabButtons ){ | |
mobileTabButtons.forEach(function(mobileTabButton){ | |
mobileTabButton.addEventListener('click',function(e){ | |
e.preventDefault(); | |
tabClickHandler(this); | |
}); | |
}); | |
} | |
// Close all tabs | |
const tabgroups = document.querySelectorAll('.elementor-widget-tabs .elementor-tabs-content-wrapper'); | |
if(tabgroups){ | |
let delay = 300; // We must wait for the tab groups to initialize. | |
setTimeout(function(){ | |
tabgroups.forEach(function(tabgroup){ | |
// Set the tab buttons to inactive state: | |
let buttons = tabgroup.getElementsByClassName('elementor-tab-mobile-title'); | |
if( buttons ){ | |
console.log('🔔 Updating button state.' ); | |
for( let i = 0; i < buttons.length; i++ ){ | |
buttons[i].classList.remove( activeClass ); | |
} | |
} | |
// Hide the tab content: | |
let contents = tabgroup.getElementsByClassName('elementor-tab-content'); | |
if( contents ){ | |
console.log('🔔 Hiding tab contents.' ); | |
for( let i = 0; i < contents.length; i++ ){ | |
contents[i].classList.remove('elementor-active'); | |
contents[i].style.display = 'none'; | |
contents[i].setAttribute('hidden', ''); | |
} | |
} | |
}); | |
},delay); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment