# Class Adder Actions 🧪

{% hint style="danger" %}
**UNDER SPECIFICATION** 

{% endhint %}

Problems;

Ideally we want to be able to attach multiple event-actions to a single element.  

sa-action-class-data:test 

## Usage Notes 

Add the appropriate attribute to add, remove, or toggle classes.  Assign it to the Event name that will invoke this Action. 

e.g. `sa-action-class-add` = ( *event name* ) 

Separately, define the class that is being manipulated; 

e.g. `sa-action-class-data` = ( *class name* )  

{% hint style="success" %}
See [Data](#data) for more details on the class name. 
{% endhint %}

### Attributes

These are the supported Action attributes; 

| Attribute                |                                  |                                                |
| ------------------------ | -------------------------------- | ---------------------------------------------- |
| `sa-action-class-add`    | Add a class to the element       | See [Data](#data) for how to specify the class |
| `sa-action-class-remove` | Remove a class from the element  | See [Data](#data) for how to specify the class |
| `sa-action-class-toggle` | Toggles the class on the element | See [Data](#data) for how to specify the class |

## Data

### `sa-action-class-data` = ( *class name* )   

Specify the class name that will be added, removed, or toggled. 

## Future  

### Multiple Classes

{% hint style="success" %}
It may be possible to specify multiple classes, space-delimited, e.g. `red highlight`.  

In this case we would add or remove both classes. 
{% endhint %}

{% hint style="warning" %}
Toggling here could be ambiguous, e.g. if the element has `red` but not `highlight` than what state is it in?  In this scenario, we would likely consider it "off", and the initial toggle action would turn it "on" by ensuring both classes are added. 
{% endhint %}