(Pro) Mobile sub-menu collapse when another is opened

[adsmedia]

Hi,

I’m trying to make it so that when on mobile you click on a sub-menu it collapses any others that were open. If all were open at the same time, the menu on mobile devices would require lots of scrolling.

I found this code in another thread, but I think it’s for X but I’m using Pro. I was hoping you might be able to adapt it to work for Pro as well?

Thanks,
Ryan

jQuery(function($) {

$(’.x-sub-toggle’).on(‘touchstart click’, function(e){
//e.preventDefault();
$(’.sub-menu’).removeClass(‘in’);

$(’.x-sub-toggle’).removeClass(‘x-active’);
$(’.x-nav > li’).removeClass(‘x-active’);

$(this).toggleClass(‘x-active’).closest(‘li’).toggleClass(‘x-active’);
$(this).parent().parent().toggleClass(‘x-active’);

});

});

[Alaa]

Hi Ryan,

Since it depends on the type of navigation used, could you please share your exact website you want to apply this effect on so we can check why this code isn’t working?

Thanks.

[adsmedia]

Added link to the note on the opening post.

Thanks!

[Alaa]

Hi @adsmedia

That’s a snippet you can start with:

jQuery( document ).ready(function($) {
	$('.x-anchor-menu-item').click(function(){
		$('.x-anchor-menu-item').not(this).each(function(){
			$(this).removeClass('x-active');
			$(this).parent().attr("data-x-collapse", "closed");
		});
	});
});

As this is all custom development, regretfully we wont be able to assist further. Custom development is outside the scope of our support. Were happy to provide advice and get you started in the right direction, but you would still be responsible for the implementation. And moreover, this solution may not work after several updates especially if the themes structure changed or overridden.

Thanks.