Docs

[Bobby Bosler]

Hello,

I am working on a mobile menu and I was wondering if there was a way to have sibling elements (with children) to collapse when a sibling element is expanded?

So, for instance, if I have the following items:

Parent 1

• Menu Item 1
• Menu Item 2

Parent 2

• Menu Item 1
• Menu Item 2

When I click on Parent 1, the Menu Items appear. What I’d like to happen is that when I click on Parent 2, Parent 1 would contract.

Is this possible?

[Rupok]

Hi there,

Thanks for writing in! It sounds unusual and might be possible with custom development. Unfortunately we can’t assist on such customization as it’s out of our support scope.

Cheers!

[Bobby Bosler]

It’s not very unusual actually. It seems to be pretty understandable functionality.

I’ve been working on making this work using jQuery, and it’s almost there, but I could use a bit of input to perfect it:

jQuery(document).ready(function($) {
   var closedMenuLink = $('.x-navbar .mobile .x-nav li.menu-item-has-children>a');

   closedMenuLink.click(function(e) {
	 e.preventDefault();
	 $(this).parent('.menu-item-has-children').addClass('open');
	 
   });
});

jQuery(document).ready(function($) {
    var openMenuLink = $('.x-navbar .mobile .x-nav li.menu-item-has-children.open>a');

   openMenuLink.click(function(e) {
	 e.preventDefault();
	 $(this).parent('.menu-item-has-children.open').removeClass('open');
	 
   });
});

jQuery(document).ready(function($) {
   var newClosedMenuLink = $('.x-navbar .mobile .x-nav li.menu-item-has-children>a');

   newClosedMenuLink.click(function(e) {
     e.preventDefault();
     $(this).parent('.menu-item-has-children').siblings('.menu-item-has-children.open').find('.sub-menu.collapse').slideToggle(300);
     $(this).parent('.menu-item-has-children').siblings('.menu-item-has-children.open').removeClass('open');
   });
});

It’s working as expected, except when you manually close a menu. Then it seriously messes up and I don’t know why. Any thoughts?

[Rupok]

Hey there,

Thanks for writing back! Regretfully, this particular customization request is outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself. If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries.

Thank you for your understanding.

[Bobby Bosler]

@Rupok

I have to say, I am a little disappointed in the unwillingness to help on this. I’ve been helped in areas “outside the scope of support” before by others there at Themeco, and have always been impressed with their willingness. But then again, with how much everyone is posting on the forums, I’m sure you’ve all had to scale back your level of “custom dev.” I’m not upset, just disappointed that the era of outstanding, “wow factor” support is now over.

For those who look are looking for the solution I was looking for, I did figure out how to do it, and will post it here for your benefit:

jQuery(document).ready(function($) {
   var closedMenuLink = $('.x-navbar .mobile .x-nav li.menu-item-has-children>a');

   closedMenuLink.click(function(e) {
	 e.preventDefault();
	 if ($(this).parent('.menu-item-has-children').hasClass('open')) {
		 $(this).parent('.menu-item-has-children').removeClass('open');
		 } else {
		 $(this).parent('.menu-item-has-children').addClass('open');	 
		 }
	 
   });
});

jQuery(document).ready(function($) {
   var newClosedMenuLink = $('.x-navbar .mobile .x-nav li.menu-item-has-children>a');

   newClosedMenuLink.click(function(e) {
     e.preventDefault();
     $(this).parent('.menu-item-has-children').siblings('.menu-item-has-children.open').find('.sub-menu.collapse').slideToggle(300);
     $(this).parent('.menu-item-has-children').siblings('.menu-item-has-children.open').removeClass('open');
   });
});

[Rue Nel]

Hello There,

Thanks for sharing this information.
This is a good resource for people who are looking into this kind of customizations.

Best Regards.

[Author]

Posts