Toggle pattern

A pattern to toggle classes on HTML elements.

Migration note (Plone 6)

This mockup pattern will probably replaced by patternslib/toggle. Some features are already broken like "Toggle an element by hover event". We decided to not migrate all examples and no tests.

Configuration

Option	Type	Default	Description
target	string	null	selector of the target elements to toggle ('undefied')
targetScope	null	selector of a target scope element in anchestors ('global')
attribute	string	null	element attribute which will be toggeled ('class')
event	string	null	event which will trigger toggling ('click')

Examples

Toggle itself

<button type="button" class="btn btn-primary pat-toggle" data-pat-toggle="value:btn-lg;">
    This button goes bigger/smaller!
</button>

Toggle all targets (global scope)

Hello World

<div class="wrapper">
    <button
        type="button"
        class="btn btn-primary pat-toggle mb-2"
        data-pat-toggle="value:badge-success;target:.targetElement"
    >
        This button is toggling the background of a element.</button
    ><br />
    <span class="targetElement badge bg-secondary">Hello World</span>
</div>

Toggle specific target inside a target scope

Hello World

<div class="wrapper">
    <div class="myScope">
        <button
            type="button"
            class="btn btn-primary pat-toggle mb-2"
            data-pat-toggle="value:bg-success;target:.targetElement;targetScope:.myScope;"
        >
            toggle</button
        ><br />
        <span class="targetElement badge bg-secondary mb-4">Hello World</span>
    </div>
    <div class="myScope">
        <button
            type="button"
            class="btn btn-primary pat-toggle mb-2"
            data-pat-toggle="value:bg-success;target:.targetElement;targetScope:.myScope;"
        >
            toggle</button
        ><br />
        <span class="targetElement badge bg-secondary">Hello World</span>
    </div>
</div>

Toggle more than one target inside a specific target scope

Hello World Hello again

Hello World

<div class="wrapper">
    <div class="myScope">
        <button
            type="button"
            class="btn btn-primary pat-toggle mb-2"
            data-pat-toggle="value:bg-success;target:.targetElement;targetScope:.myScope;"
        >
            toggle</button
        ><br />
        <span class="targetElement badge bg-secondary">Hello World</span>
        <span class="targetElement badge bg-secondary mb-4">Hello again</span>
    </div>
    <div class="myScope">
        <button
            type="button"
            class="btn btn-primary pat-toggle mb-2"
            data-pat-toggle="value:bg-success;target:.targetElement;targetScope:.myScope;"
        >
            toggle</button
        ><br />
        <span class="targetElement badge bg-secondary">Hello World</span>
    </div>
</div>