Custom Toggle Button for Triggering Off Canvas

[simeoned]

There is a similar thread found here : Link to off-canvas content from 2017. But I thought I’d contribute to the conversation in case anyone needs to do this and experienced the same trouble I ran into using 6.1.9.

The Problem:
Before I solved it, the trouble was that the replaced Toggle I made from a div with a Raw Content element containing a custom SVG was not triggering the Off Canvas element while using the code found in the post from 2017. It was only getting as far as animating the default Toggle hamburger, which would then just return to its default state and no Off Canvas would slide out.

The solution:
Wrap the reference to the original Toggle in the jQuery in a short timeout like this:
jQuery(function(){
jQuery(’#custom-trigger’).click(function(e) {
e.preventDefault();
setTimeout(() => {
jQuery(’#default-target-anchor-toggle’).click();
}, 100);
})
});

And here’s a little bit of CSS to support the effort:
#default-target-anchor-toggle { display:none; }
.tco-preview #default-target-anchor-toggle {
display:initial;
border-radius:5px;
border:1px dashed rgb(0 0 0 / 0.2);
}

This hides the default Toggle on the front end but makes it visible in the builder so you can continue to trigger the Off Canvas element in there and work on its content (the replacement Toggle wont trigger it in the builder).

Change your ID’s as you see fit or use classnames if you want. Use your dev tools to figure what you wanna target and create what you want to replace that with.

Questions for Support:
This jQuery gets the job done as far as I can tell. But why did the code from 2017 need to have the timeout added as I have done? Did something change about the way this works since then that we need to be aware of?

Thanks!

[ruenel]

Hey @simeoned,

Thanks for writing in!

The timeout serves as a delay of 100ms. You can also omit that. In the latest version, you do not need that code. Once you have added a Toggle Hash to your Off-canvas element, you can use it as a button link.

Once you click on the Button element, the Off-Canvas will open.

Hope this helps.

[simeoned]

Yes, thank you. I know what the timeout does… I wrote it to get around the problem I encountered which prompted the question I am asking…

I’m asking why this was necessary (and considering the code from 2017) if the Toggle Hash method you describe is not desirable (and it is not in this case and, I imagine, in many others). It is not desirable because it appends the URL with that hash name and I want it to remain “invisible”. I want it invisible because if someone shares the URL with the hash in it, the menu opens when the page loads. This may be something you want in some builds but, not this one. So JS is necessary to pull that off.

So again, why is the timeout of 100ms needed to make this work? Its really just a curiosity at this point but it is sort of magic numbered here… like, is 100ms the right number? Can 50 be relied on? Would 100 break possibly under some unforeseen circumstance? This is the sort of stuff I’m driving at. Make sense?

[ruenel]

Hello @simeoned,

The 100ms is I think enough to give a slight delay before triggering the toggle click. I may also work without it like for example;

jQuery(function(){
	jQuery('#custom-trigger').click(function(e) {
		e.preventDefault();
		jQuery('#default-target-anchor-toggle').click();
	})
});

I guess that the one who gave the code just opted to add a delay before the click event to happen.

Cheers.