# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://attr.sygnal.com/overview/events/actions/class-adder-actions.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.