[Resolved] Slidout menu collapse on dropdown click

[Christine]

Hi,

In my website I would lke to have a functionality on mobile slide out menu like if I click the one drop down section it opens, when I click on second/any other drop down the previously opened dropdown should get collapsed.
Please let me know how we can do it. This is for your reference. https://prnt.sc/rst7hj

Regards

[Leo]

Hi there,

Can you try this?
https://generatepress.com/forums/topic/only-one-menu-open-at-a-time-in-the-submenu/page/2/#post-847826

It can be added using the wp_footer hook in a hook element:
https://docs.generatepress.com/article/hooks-element-overview/

[Christine]

Hi Leo, Thank you for your response. I have added this code in my website but i cannot see the difference. I have added as a hook in wp_head.

<script>
    jQuery( document ).ready( function( $ ) {
        $( '.main-navigation ul ul li.menu-item-has-children > a' ).on( 'click', function() {
            $( this ).closest( 'li' ).siblings().removeClass( 'sfHover' ).find( '.sub-menu' ).removeClass( 'toggled-on' );
        } );
    } );
</script>

We are clicking on the arrow and checking this. If I click on Parent sub menu item then we will be redirected to a different page so we don’t need it there.

Please visit blissfulweddingfeet.com.au/ and check by yourself once.

Thanks

[Tom]

Can you try this instead?:

<script>
    jQuery( document ).ready( function( $ ) {
        $( '.main-navigation ul ul li.menu-item-has-children > a > .dropdown-menu-toggle' ).on( 'click', function() {
            $( this ).closest( 'li' ).siblings().removeClass( 'sfHover' ).find( '.sub-menu' ).removeClass( 'toggled-on' );
        } );
    } );
</script>

[Christine]

Hey This worked… Thanks….

[Tom]

No problem!

[Author]

Posts