# Element Actions 🧪

**Actions** are a developing concept in the SA5 Element Lib, which refers to the ability to tag an element with attributes, that "remote control" another element on the page.

Use cases;

* Navigate a swiper, tab, or accordion element
  * First, last, next, prev, specific item # 
* Change the locale
* ? Hide and show elements

Conceptual rules; 

* Actions consist of;
  * An action
  * A target
  * Optional data
  * A trigger type ( default click ) 
* Actions are the center of the config 
  * Target is optional for some actions  

| Action            | Tabs, Swiper, Accordion |   | Locale Switcher              | Any |
| ----------------- | ----------------------- | - | ---------------------------- | --- |
| **Navigation**    |                         |   |                              |     |
| `first`           | Yes                     |   | -                            | -   |
| `last`            | Yes                     |   | -                            | -   |
| `next`            | Yes                     |   | -                            | -   |
| `nextLoop`        | Yes                     |   | -                            | -   |
| `prev`            | Yes                     |   | -                            | -   |
| `prevLoop`        | Yes                     |   | -                            | -   |
| `goto`            | Yes, specify item #     |   | ~~Yes, specify locale code~~ |     |
| **Visibility** 🧪 |                         |   |                              |     |
| ~~`hide`~~        | Yes                     |   |                              | Yes |
| ~~`show`~~        | Yes                     |   |                              | Yes |
| ~~`toggle`~~      | Yes                     |   |                              | Yes |
| **Collapsing** 🧪 |                         |   |                              |     |
| ~~`open`~~        | -                       |   |                              |     |
| ~~`close`~~       | -                       |   |                              |     |
| **Forms** 🧪      |                         |   |                              |     |
| ~~check~~         |                         |   |                              |     |

On elements which 

### `wfu-action` = ( method ) <a href="#wfu-lightbox-captions-attribute" id="wfu-lightbox-captions-attribute"></a>

**Required.** I want my button or link to perform the following action on the targeted deck element.

Method is one of;

* `first` - select the first item
* `prev` - select the previous item
  * `prevLoop` - select the previous item or loop if we're on the first item
* `next` - select the next item
  * `nextLoop` - select the next item or loop if we're on the last item
* `last` - select the last item
* `goto` - select the specified item, as specified by `wfu-deck-action-item`&#x20;

### `wfu-action-target` = ( target element name )

**Optional.** Specifies the `wfu-name`, `wfu-tabs`, `wfu-slider` or `wfu-accordion` name you want your action to target.

If unspecified, it will look for the nearest named parent element as the target. &#x20;

### `wfu-action-item` = ( item number | name )  <a href="#wfu-lightbox-captions-attribute" id="wfu-lightbox-captions-attribute"></a>

**Required for the `goto` action only.** Specifies the tab / slide you want to navigate to.&#x20;

* a number - indicates the item number, 1, 2, 3...&#x20;
* a string - activates the item with the specified name&#x20;

### `wfu-action-trigger` = ( trigger-type )  <a href="#wfu-lightbox-captions-attribute" id="wfu-lightbox-captions-attribute"></a>

One of;&#x20;

* `click` ( default )
* `scrollTo`&#x20;
* `scrollPercent`&#x20;
* `timer`
* `exitIntent`&#x20;


---

# 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/sa5-elements/element-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.