3.1.1 | Button to Toggle Canvas

Beta
#1

Not sure that this is a bug but if I create a button (elsewhere on the page) to toggle an off-canvas item in the header, it only works once. After that, it’s a dud.

#2

Hi @DoncoMarketing,

Thanks for the heads up here. I will look into it and confirm with you.

#3

Hi @DoncoMarketing,

I’m looking into this and realize I may need some more information. Are you using a custom script to trigger the modal? I was able to get it working with these steps:

  • Add Content Area Off Canvas element in header and set ID to off-canvas-content
  • Add a button in the content builder with class of trigger-off-canvas-content
  • Add this code in the header:
jQuery('body').on('click', '.trigger-off-canvas-content', function(e) {
  e.preventDefault();
  jQuery('#off-canvas-content-anchor-toggle').trigger('click')
});

Let me know if that works for you, or if there was another technique you need help troubleshooting.

1 Like
#4

Hi Alexander,

Thanks for this👆 – works like a charm.

I was actually just using the built-in Toggle Hash on the off canvas element and then placing that trigger hash into the content builder button. I take it that isn’t the best way to do it?

How I was going about it:
• Add Content Area Off Canvas Element and set Toggle Hash to “join”
• Add a button in the content builder with url set to #join
• Clicking button works the first time but then requires reload as the #join anchor has already been used

Hope that makes sense.

Thanks.

#5

Gotcha! Glad to hear it’s working. That toggle hash was primarily meant for incoming URLs, it only checks if the hash is present if navigation actually occurs which happens when you change hashes, or a new page load. It’s handy for tabs and accordions because it will keep them open, but isn’t quite applicable for consistently opening a toggle from a separate button.

1 Like