Stimulus Toggler

Appearance

Return to top
On this page

How to use transitions

Transitions can be applied with data-transition-xxx in the toggled element.

Also, an alias data-toggler-transition=mytransition can be used as a shortcut.

See alias for data-toggler-transition
  • data-toggler-transition=mydropdown" is an alias of:
    • data-transition-enter="mydropdown-enter"
    • data-transition-enter-start="mydropdown-start"
    • data-transition-enter-end="mydropdown-end"
    • data-transition-leave="mydropdown-leave"
    • data-transition-leave-start="mydropdown-start"
    • data-transition-leave-end="mydropdown-end"

so you can use it in your css file like:

css
.mydropdown-enter { ... }
.mydropdown-start { ... }
.mydropdown-end { ... }
.mydropdown-leave { ... }
.mydropdown-start { ... }
.mydropdown-end { ... }

Example of data-transition-xxx values:

html
<div
    data-transition-enter="ease-in-out duration-500"
    data-transition-enter-start="opacity-0"
    data-transition-enter-end="opacity-100"
    data-transition-leave="ease-in-out duration-500"
    data-transition-leave-start="opacity-100"
    data-transition-leave-end="opacity-0"
>

Example of data-toggler-transition value:

html
<div data-toggler-transition="mydropdown">

Input

html
<div data-controller="toggler" class="example">
    <!-- togglers -->
    <button id="btn_toggle_11" data-toggler-states="div_11">Toggle 11 fuchsia </button>
    <button id="btn_toggle_12" data-toggler-states="div_12">Toggle 12 fuchsia</button>
    <button id="btn_toggle_11_12" data-toggler-states="div_11,div_12">Toggle 11 and 12 fuchsia</button>
    <!-- elements to toggle -->
    <div id="div_11" class="bg-fuchsia-500"
                     data-toggler-target="toggleable"
                     data-toggler-listen="div_11"
                     data-toggler-classes="bg-fuchsia-500"
                     data-transition-enter="ease-in-out duration-500"
                     data-transition-enter-start="bg-opacity-0"
                     data-transition-enter-end="bg-opacity-100"
                     data-transition-leave="ease-in-out duration-500"
                     data-transition-leave-start="bg-opacity-100"
                     data-transition-leave-end="bg-opacity-0">
        Eleventh (11) starting on
    </div>
    <div id="div_12"
                     data-toggler-target="toggleable"
                     data-toggler-listen="div_12"
                     data-toggler-classes="bg-fuchsia-500"
                     data-transition-enter="ease-in-out duration-500"
                     data-transition-enter-start="bg-opacity-0"
                     data-transition-enter-end="bg-opacity-100"
                     data-transition-leave="ease-in-out duration-500"
                     data-transition-leave-start="bg-opacity-100"
                     data-transition-leave-end="bg-opacity-0">
        Twelveth (12) starting off
    </div>
</div>

Output

Eleventh (11) starting on
Twelveth (12) starting off