Open Off Canvas Area

[wolfproductions]

Hi, I have created an off-canvas area in the header of a new site that I am building. Embedded via shortcode is a map plugin with directions. Works fine… BUT if I use the shortcode again anywhere else on the page it causes a conflict with the API.

However I also wanted the VISIT off canvas the bottom of the page to also load the map in an OC area. So, what I need to do is turn the ‘VISIT’ toggle into a button and then open the OC in the header using the button - so the page only has the one map

I know how to make the button look the same as the OC toggle in the header, but can you please can you let me know how to link a button to the OC in the header?

Thanks for your help

[tristup]

Hi @wolfproductions,

Thanks for reaching out.
If I am able to understand your requirements, you want to open a Off Canvas using a Button. If that is the case, please go through the following thread which will help you acheive that.

Make button trigger modal, but only upon click (not at pageload)

Hi @nblund, You can use the following code to trigger the modal on the button click. Here open-modal-button is the class assigned to the button and the assigned id of the modal my-content-area-1. Remember that, the anchor-toggle suffix will be added to the given id of Modal. [Screenshot-2021-12-17-183402] [Screenshot-2021-12-17-183420] jQuery ( document ).on ('click', '.open-modal-button', ( e ) => { e.preventDefault(); jQuery('#my-content-area-1-anchor-toggle')[0].click(); } )…

Thanks

[wolfproductions]

@Make button trigger modal

jQuery ( document ).on ('click', '.open-modal-button', ( e ) => 
{ 
    e.preventDefault(); 
    jQuery('#my-content-area-1-anchor-toggle')[0].click();
} );

Thanks Tristup, that’s great.

[tristup]

Hi @wolfproductions,

Glad that we are able to help you.

Thanks