Collapsing Menu For FullWidth Menu Module - kary4/divituts GitHub Wiki

<style type="text/css" id="collaps-menu-css">
#page-container .et_mobile_menu .menu-item-has-children > a { background-color: transparent; position: relative; }
#page-container .et_mobile_menu .menu-item-has-children > a:after { font-family: 'ETmodules'; text-align: center; speak: none; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; position: absolute; }
#page-container .et_mobile_menu .menu-item-has-children > a:after { font-size: 16px; content: '\4c'; top: 13px; right: 10px; }
#page-container .et_mobile_menu .menu-item-has-children.visible > a:after { content: '\4d'; }
#page-container .et_mobile_menu ul.sub-menu { display: none !important; visibility: hidden !important;  transition: all 1.5s ease-in-out;}
#page-container .et_mobile_menu .visible > ul.sub-menu { display: block !important; visibility: visible !important; }
</style>

<script type="text/javascript" id="collaps-js">
(function($) {
      
    function setup_collapsible_submenus() {
        var $menu = $('.et_mobile_menu'),
            top_level_link = '.et_mobile_menu .menu-item-has-children > a';
             
        $menu.find('a').each(function() {
            $(this).off('click');
              
            if ( $(this).is(top_level_link) ) {
                $(this).attr('href', '#');
            }
              
            if ( ! $(this).siblings('.sub-menu').length ) {
                $(this).on('click', function(event) {
                    $(this).parents('.mobile_nav').trigger('click');
                });
            } else {
                $(this).on('click', function(event) {
                    event.preventDefault();
                    $(this).parent().toggleClass('visible');
                });
            }
        });
    }
      
    $(window).load(function() {
        setTimeout(function() {
            setup_collapsible_submenus();
        }, 700);
    });
 
})(jQuery);
</script>

<style type="text/css">
body.et_divi_theme.theme-Divi #page-container header .et_mobile_menu .menu-item-has-children > a { background-color: transparent; position: relative; }
header .et_mobile_menu .menu-item-has-children > a:after { font-family: 'ETmodules'; text-align: center; speak: none; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; position: absolute; }
header .et_mobile_menu .menu-item-has-children > a:after { font-size: 16px; content: '\4c'; top: 13px; right: 10px; }
header .et_mobile_menu .menu-item-has-children.visible > a:after { content: '\4d'; }
	
	
body.et_divi_theme.theme-Divi #page-container header .et_mobile_menu ul.sub-menu { display: none !important; visibility: hidden !important;  transition: all 1.5s ease-in-out;}
body.et_divi_theme.theme-Divi #page-container header .et_mobile_menu .visible > ul.sub-menu { display: block !important; visibility: visible !important; }
</style>

<script type="text/javascript">
(function($) {
    
    function setup_collapsible_submenus() {
        var $menu = $('header .et_mobile_menu'),
            top_level_link = 'header .et_mobile_menu .menu-item-has-children > a';
            
        $menu.find('a').each(function() {
            $(this).off('click');
            
            if ( $(this).is(top_level_link) ) {
                $(this).attr('href', '#');
            }
            
            if ( ! $(this).siblings('.sub-menu').length ) {
                $(this).on('click', function(event) {
                    $(this).parents('.mobile_nav').trigger('click');
                });
            } else {
                $(this).on('click', function(event) {
                    event.preventDefault();
                    $(this).parent().toggleClass('visible');
                });
            }
        });
    }
    
    $(window).load(function() {
        setTimeout(function() {
            setup_collapsible_submenus();
        }, 700);
    });
})(jQuery);
</script>
<script>
jQuery( document ).ready(function() {
	setTimeout( () => {
		jQuery('.et_mobile_menu li').has('ul').addClass('menu-item-has-children');
	},1500)
}); 
</script>