JSFiddle - React, Tailwind, and code Playground
HTML
<div id="menu-mainmenu">
I am a menu :D
</div>
<button class="menuButton">Menu toggler</button>
JavaScript
document.addEventListener('DOMContentLoaded', () => {
let clicks = 0;
let menu = document.querySelector('#menu-mainmenu'); // Menu identifier.
let menuButton = document.querySelector('.menuButton'); // Button class in pagebuilder.
menuButton.addEventListener('click', ()=>{
clicks++;
if (clicks % 2) {
menu.style.display = 'block';
} else {
menu.style.display = 'none';
}
});
let mobileBehavior = ()=>{
menu.style.display = 'none';
};
if (window.innerWidth <= 768) {
mobileBehavior();
}
// Event cleanups:
window.addEventListener('resize', ()=>{
console.log(window.innerWidth);
if (window.innerWidth <= 768) {
clicks = 1; // Prevent menuButton double clicking.
mobileBehavior(); // Display mobile menu both on bootstrapping and resize.
} else if (window.innerWidth >= 769) {
menu.style.display = 'block'; // Prevent display:none by mobile mode.
}
});
});