Mobile menu: How to use the whole menu item to make the submenu expand

Hello there,

is there a way to change the mobile menu to expand when clicking the whole title of it and not just the arrow icon?
I assume I only have to change this code, but after several tries nothing really worked out.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

/* ------------------------------------------------------------------------ */ /* Mobile Navigation /* ------------------------------------------------------------------------ */ $('#mobile-navigation-btn').click(function(){ $('#mobile-navigation').stop(true,true).slideToggle(300, 'easeOutBack'); //easeInOutSine works also nice at 200ms return false; }); $('#mobile-navigation .container ul li').each(function(){ if($(this).find('> ul').length > 0) { $(this).addClass('has-ul'); $(this).find('> a').append('<i class="fa fa-chevron-down"></i>'); } }); $('#mobile-navigation .container ul li:has(">ul") > a i').click(function(){ $(this).parent().parent().toggleClass('open'); $(this).parent().parent().find('> ul').stop(true,true).slideToggle(300, 'easeOutBack'); return false; });

I tried to just use

1	$('#mobile-navigation .container ul li:has(">ul") > a').click(function()

without the “i” and remove the arrow icon, but that didnt quite work. What could I change there to make it work?

Kind regards!

Ticket