Triggers Click

Change the element classes on click without writing any JavaScript

Overview

Add, remove or toggle element class on click. You can change the classes for element itself (default), or you can target the change to any element on the page.

Syntax

data-tor="click:class.<action>(<classes>, {<options>})"

Where:

• <action> - performed class action. This can be add, remove or toggle
• <classes> - a list of classes to change separated by the space
• <options> - additional options such as target element

Examples

Add class

To add a class to the element itself, use class.add() action. We are using the click trigger, to add a .opacity-50 class when the user clicks on that element.

<div data-tor="click:class.add(opacity-50)">Click to add</div>

Remove class

To remove a class from the element itself, use class.remove() action. We are using the click trigger, to remove a .opacity-50 class when the user clicks on that element.

<div class="opacity-50" data-tor="click:class.remove(opacity-50)">Click to remove</div>

Toggle class

To toggle a class on the element itself, use class.toggle() action. We are using the click trigger, to toggle a .opacity-50 class when the user clicks on that element.

<div data-tor="click:class.toggle(opacity-50)">Click to toggle</div>

Multiple classes

You can also change multiple classes at once, just separate them with a space.

<div data-tor="click:class.toggle(opacity-50 bg-dark rounded-xl)">Click to toggle multiple classes</div>

Options

Target element

The power of Torus Kit Class actions is in the ability to address the class change to any element on the page. Use target: key in the options to define a desired target element.

<div data-tor="click:class.toggle(opacity-50, {target: #dark-element})">Example</div>
<div id="dark-element">Dark element</div>

You can also change the class on multiple elements. Just use a class selector, instead of id.

<div data-tor="click:class.toggle(opacity-50, {target: .change-me})">Example</div>
<div class="change-me">Dark element</div>
<div class="change-me">Dark element</div>
<div class="change-me">Dark element</div>