Elementor close off canvas on same page link click

Cabs answered on March 18, 2025 Popularity 1/10 Helpfulness 1/10

answer Elementor close off canvas on same page link click

Elementor close off canvas on same page link click

Comment

<style>
/* Keyframes for slide-in and slide-out animations */
@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes slideOutLeft {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

/* Custom styles to manage Off Canvas visibility */
.e-off-canvas-hidden {
    animation: slideOutLeft 1s forwards; /* Adjusted duration */
}

.e-off-canvas-visible {
    animation: slideInLeft 0.5s forwards;
}

.e-off-canvas-overlay-hidden {
    display: none !important;
}
</style>
<script>
jQuery(function($){
    // Function to hide the Off Canvas and overlay
    function hideOffCanvas() {
        $('[class^="e-off-canvas"]').removeClass('e-off-canvas-visible').addClass('e-off-canvas-hidden');
        $('.e-off-canvas__overlay').addClass('e-off-canvas-overlay-hidden');
        $('body').removeClass('e-off-canvas__no-scroll');
    }

    // Function to show the Off Canvas and overlay
    function showOffCanvas() {
        $('[class^="e-off-canvas"]').removeClass('e-off-canvas-hidden').addClass('e-off-canvas-visible');
        $('.e-off-canvas__overlay').removeClass('e-off-canvas-overlay-hidden');
        $('body').addClass('e-off-canvas__no-scroll');
    }

    // Handle link clicks inside the Off Canvas
    $(document).on('click', '[class^="e-off-canvas"] a', function(event){
        var target = $(this).attr("href");

        // Check if the link is an action to close the Off Canvas
        if (target.includes('elementor-action%3Aaction%3Doff_canvas%3Aclose')) {
            event.preventDefault();
            hideOffCanvas();
            return;
        }

        var split_url = target.split('#');

        // Check if the link is an anchor link within the same page
        if (split_url.length > 1 && (window.location.pathname == split_url[0] || split_url[0] == '')){
            event.preventDefault();
            $('html, body').animate({
                scrollTop: $('#'+split_url[1]).offset().top
            }, 1000);
            hideOffCanvas();
        } else {
            hideOffCanvas();
        }
    });

    // Handle the Off Canvas toggle button click
    $(document).on('click', '.off-canvas-toggle-button', function(event){
        showOffCanvas(); // Show the Off Canvas and overlay
    });
});
</script>

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: learn.websquadron.co.uk

Tags: canvas click elementor javascript

Link to this answer
Share Copy Link

Contributed on Mar 18 2025

Cabs

0 Answers Avg Quality 2/10

Elementor close off canvas on same page link click

Contents

More Related Answers

Elementor close off canvas on same page link click

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.