Custom Close button for off-canvas element

Hello
Im trying to set the close function to a custom button inside the off canvas element with this code:

jQuery(document).ready(function($){
$(’#my_button’).click(function(){
if($(’#myoffcanvaselement’).hasClass(‘x-active’)) {
$(’#myoffcanvaselement’).removeClass(‘x-active’);
}
});
});

And I’m failing :(. I’d appreciate any hint very much.
Kind regards.

Hi Ondrej,

Thanks for reaching out.
You need to add a button or an anchor element with the data-x-toggle-close custom attribute with the value of 1 to make that a close button for the Off Canvas.

Screenshot 2022-05-05 211012

Hope it helps.
Thanks

Worked like a charm. Btw I have figured it out with the javascript as well. It has to be:

jQuery(document).ready(function($){
$(’#my_button’).click(function(){
if($(’#myoffcanvaselement-off-canvas’).hasClass(‘x-active’)) {
$(’#myoffcanvaselement-off-canvas’).removeClass(‘x-active’);
}
});
});

#myoffcanvaselement” was not enough… I had to add the “-off-canvas” to the # in the function.

But now I don’t need the custom javascript at all…

Hey Ondrej,

Great then and I am glad that my colleague was able to help you with your issue! If you have any other concerns or clarifications regarding our theme features, feel free to open up a new thread.

Thank you.

  1. Is there any guide, which lists all the custom attributes and possible usage?

  2. Other way: how do I set the class of an off canvas element to “x-active” so its “on canvas” at page load?

  3. what if I have more than one off-canvas element on the same page? The “data-x-toggle-close” attribute addresses all “off-canvas” elements on the same page, does it?

Thx a heap!

Hi Ondrej,

Please find the answer to your questions below.

  1. Unfortunately, there is no specific guidance on the custom attributes available on the specific element.

  2. I would suggest you go through the following thread on the same topic.

    Native pop up?

  3. Button for each Off Canvas will close the parent element accordingly.

Hope it helps.
Thanks

Thx a heap! The “native pop up” Method worked like a charm…

Hey Ondrej,

Great and you’re welcome! If you have any other concerns or clarifications regarding our theme features, feel free to open up a new thread.

Thank you.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.