Basic example

Just toggles the class hidden in elements.

It will use hidden as off-class and the empty string as on-class.

Input

html

<div data-controller="toggler" class="example">
    <!-- togglers -->
    <button id="btn_hide_sidebar" data-toggler-states="-_sidebar">Close sidebar</button>
    <button id="btn_show_sidebar" data-toggler-states="+_sidebar">Open sidebar</button>
    <button id="btn_toggle_sidebar" data-toggler-states="_sidebar">Toggle sidebar</button>
    <!-- elements to toggle -->
    <div id="sidebar" class="bg" data-toggler-target="toggleable" data-toggler-listen="_sidebar">
        This is my fancy sidebar
    </div>
</div>

Output

Basic example #

Basic example