The WPFolks app is out on iPhone and Android. Free, no ads. Download on the App Store Get it on Google Play
Skip to main content
Login Join
Snippet · JavaScript

Toggle Mobile Navigation

Shared by Hiral solanki · September 17, 2026

22 views
1 upvote
Back to Snippets

Creates an accessible mobile navigation toggle using aria-expanded and a CSS class, making it suitable for custom WordPress themes.

document.addEventListener('DOMContentLoaded', function () {
    const toggle = document.querySelector('.menu-toggle');
    const menu = document.querySelector('.mobile-menu');

    if (!toggle || !menu) {
        return;
    }

    toggle.addEventListener('click', function () {
        const isOpen = toggle.getAttribute('aria-expanded') === 'true';

        toggle.setAttribute('aria-expanded', String(!isOpen));
        menu.classList.toggle('is-open', !isOpen);
    });
});
Know a different way to do this? Add your approach as a variation so folks can compare them side by side.
Submit a variation

1 comment

  1. Amit Dholiya
    Amit Dholiya @amitdholiya

    This is used for mobile navigation toggling — nice and accessible with aria-expanded.

    Report

Proudly supported by