UIkit.toggle() Programmatic use toggles itself

Question

I'm currently facing a strange behavior while using UIkit.toggle in programmatic context - i do not really understand what happens here. When adding a toggle for an element (sidebar) UIkit adds also a click handler to the element itself - what i don't like to have. I did not found any notice about a such "feature" in the docs neither in the demos...

Docs can be found here: https://getuikit.com/docs/toggle and here: https://getuikit.com/docs/javascript#programmatic-use

My Code looks as follows:

let toggler = UIkit.toggle('#sidebar',{
            animation : 'uk-animation-slide-right'
        });
        var trigger = document.getElementById('trigger');
        trigger.addEventListener('click', function(){
            toggler.toggle()
        });

Codepen Link: https://codepen.io/Proximate/pen/RwpEzdZ

How can i remove the not wanted click event on the sidebar div itself. Did i have an error in my init or did i just missed something?

Edit: no i can not simply use the uk-toggle attribute on the "Button" because in the project the trigger is a canvas element

Answer 1

I've figured it out now via try and error... When using the UIkit.toggle() in programmatic context the format is as follows:

let toggler = UIkit.toggle('.elements-that-can-toggle',{
        target: '.elements-that-should-be-toggled',
        animation : 'uk-animation-slide-right'
    });
/* Not needed:
        var trigger = document.getElementById('trigger');
        trigger.addEventListener('click', function(){
            toggler.toggle()
        });
*/