[Resolved] Slide out menu close sub menu items

Hi there,

Not super easy, but can be done with some javascript.

If you don’t already have a custom javascript file, you can:

1. Create a new Hook Element: https://docs.generatepress.com/article/hooks-element-overview/
2. Set the hook to wp_footer, and set the Display Rules to your Entire Site.
3. Add this as the hook content:

<script>
    var parentElementLinks = document.querySelectorAll( '.slideout-navigation .menu-item-has-children > a' );
	
    for ( var i = 0; i < parentElementLinks.length; i++ ) {
        parentElementLinks[ i ].addEventListener( 'click', function() {
            var _this = this;
		
            var openedSubMenus = _this.closest( 'nav' ).querySelectorAll( 'ul.toggled-on' );
		
            if ( openedSubMenus && ! _this.closest( 'ul' ).classList.contains( 'toggled-on' ) && ! _this.closest( 'li' ).classList.contains( 'sfHover' ) ) {
                for ( var o = 0; o < openedSubMenus.length; o++ ) {
                    openedSubMenus[o].classList.remove( 'toggled-on' );
                    openedSubMenus[o].closest( 'li' ).classList.remove( 'sfHover' );
                }
            }
        }, true );
    }
</script>

This is likely something we should add to the plugin. I’ll look into it 🙂