Class actions How to use

Learn how to dynamically perform various class actions based on different triggers

Overview

Torus Kit Class actions allows to add, remove or toggle classes on one or multiple elements when the user perform hover or click on desired element, when page scrolled by a certain amount of pixels or percentage, or after time has elapsed using timeout trigger. That means, you can easily control class interactions with one trigger element that affects another elements across the page. No need to write any JavaScript!

Syntax

The syntax is very similar to the Effects one, but Class actions uses some different triggers. Here is the full syntax markup using data-tor attribute:

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

The class. word means that you are performing a class change. Further syntax items meaning:

• data-tor - the main data- attribute that stores all definitions
• <trigger> - the trigger that perform class change. Check the Triggers section for more
• <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 from 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>

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>

Triggers

Until now, we’ve used just Click trigger in our examples. But there are also Hover, Scroll and Timeout triggers to use.

Hover

To change the class on hover use the hover:class.* trigger. This example shows how to toggle .rounded-xl class on the element itself, and .opacity-50 on the target element.

<div data-tor="hover:class.toggle(rounded-xl)">Hover to toggle</div>

<div data-tor="hover:class.toggle(opacity-50, {target: #hover-toggle})">Hover to toggle</div>
<div id="hover-toggle">Target element</div>

Timeout

To change the class when a certain amount of time has elapsed, use the timeout:class.* trigger. This example shows how to add the .opacity-50 class on the element after elapsing of 3s.

<div data-tor="timeout:class.add(opacity-50, {start: 3s})">Wait 3s for add</div>

Scroll

With scroll:class.* trigger you can change the class based on scrolled amount. This example shows how you can toggle .active class on the popup. The .active class is used to animate this popup with the active:[fade.in pull.left(md)] syntax.

<div data-tor="scroll:class.add(active, {start: 50%, end: 80%}) active:[fade.in pull.left(md)]">
  <p>You have scrolled a 50% of the page and the scroll...</p>
</div>