# 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;