Single off canvas open at a time

[cityoflawrenceks]

With a header that utilizes the off-canvas element for each of the primary links, the default behavior is that they all have the ability to be open at once. So, as one clicks through the off canvas toggles, they also have to click back through to hide each of them individually.

The JS below is from another support topic and was successful in making it so clicking a toggle would close the open off-canvas and open the new one associated with the clicked toggle.

The only issue is that a toggle isn’t able to close it’s own off canvas area—just the one opened by another toggle. Thus, requiring one to click off the canvas area as the only way to close it. It’s not a huge inconvenience, it just makes the toggle that opens an off canvas area seem like it’s broken when trying to close it.

I’m wondering if there’s any obvious addition that could fix that?

JS from topic:
jQuery(function($) {
$(’.x-menu li.menu-item a.x-anchor’).on(‘click touchend’, function(event) {
var button = $(".x-off-canvas-close");
if( button.length > 0 ){
button.trigger(‘click’);
}
});
});

[friech]

Hi Kevin,

Thank you for writing in, but sorry I am not entirely certain of what you’re trying to do, Content Area Off-Canvas does not behave as you describe above. You can only open Off-Canvas one at a time. if it is a menu please utilize the Navigation Layered or Navigation Collapsed instead.

Please clarify.

[cityoflawrenceks]

Perhaps my wording could have been more precise.

Correct, one can only open (verb) Off-Canvas elements one at a time. When I said,"…they all have the ability to be open at once…", I was referring to the fact that they can all be open (adjective) at the same time.

So, if a header has five toggles and each opens a different Off-Canvas element—it’s possible to click through each of the five toggles and have all five of the Off-Canvas elements open at the same time. Thus requiring one to click through the toggles (or outside the header) to close each of the five open Off-Canvas elements.

I only want one Off-Canvas element to be open at a time. The JS provides that functionality by closing the open Off-Canvas and opening just the newly requested one. The only glitch is that the toggles no longer close their own Off-Canvas element.

[christian]

Hey Kevin,

Please let me say first that I’m sorry that it wasn’t made clear in the other thread that we’re not responsible for issues caused by custom code even if we’ve provided it.

The custom JS sample provided in the other thread is just a hack rather than a native override which by the way is not yet available. Providing that code is not a part of our product support but merely shows that it’s somehow possible to achieve the use case in the other thread.

With that said, in your case, it’s not possible without us spending more custom development resource.

You’ll need to work with the provided sample code or consult with a third-party developer to achieve the behavior that you need.

Thank you for understanding.

[cityoflawrenceks]

Similar to the setting for accordions, a native override allowing only one Off-Canvas element to open at a time seems like something that would be universally useful.

[friech]

Hi Kevin,

Thank you for the URL I understand now what you’re trying to do, 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.

Thank you for your understanding.