Open One Avada Mobile Submenu Item at a Time

only_one_mobile_submenu_at_a_time.php

<?php // Ignore this first line when copying to your child theme's functions.php file.

function only_one_mobile_submenu_at_a_time() { ?>
 	<script type="text/javascript">
		jQuery(document).ready(function ($) {
        		$( 'button.fusion-open-submenu' ).on( 'click', function() {
				$( 'button.fusion-open-submenu' ).not( $( this ) ).removeClass( 'chevron--up' );
				$( this ).toggleClass( 'chevron--up' );
				$( this ).parent( 'li.menu-item-has-children' ).siblings().find( '.sub-menu' ).removeClass( 'fusion-sub-menu-open' ).attr( 'style', 'display: none;' );
			} ); // Click
    		}); // jQuery
 	</script>
<?php }
add_action( 'wp_footer', 'only_one_mobile_submenu_at_a_time', 900 );

add_action( 'wp_head', function () { ?>
	<style>
		.chevron--up {
			transform: rotate(180deg);
		}
	</style>
<?php } );
/**
 * You can add the PHP code snippet to your child theme's functions.php file 
 * or with third-party plugins such as My Custom Functions and Code Snippets.
 * 
 * Learn more:
 * - https://docs.wppopupmaker.com/article/84-getting-started-with-custom-js
 * - https://docs.wppopupmaker.com/article/552-getting-started-with-custom-php
 */

25 March 2022: I added a feature to rotate the submenu button icon to simulate an "open/close" mode. This only works for 1 level of submenus. Nested submenus will throw off the open/close state of the icon.

Also, the icon's open mode might throw off the default styling and you might need custom CSS to compensate.