Assigns a target element for the request issued by origin element. Could be some parent element, or a sibling, or a complete separate part of the page.

ts-target accepts CSS selector (with possible modifiers) or a keywords target or inherit:



Targeting Other Elements #

Default behavior is to replace element, which issues the request (in this case an a). ts-target sets another element as a target for the request.


I'm waiting... Do it!

Targeting Parents #

This is very common pattern - when a button needs to update an element around itself. Modifier parent will search upwards for a suitable element (using element.closest(sel)).


Wanna read text behind me? Do it!

Relative Targeting (advanced)#

Most twinspark commands and extensions operate directly on the current target element. However, some of them might require a pair of elements (e.g. a command that copies data from one input to another). This means supplying a TwinSpark selector as an argument. To point directly to the current target element, use the target keyword.


Click here or here

to copy the value here:

Click one of these buttons to rename it with the value above: or

Another useful target is the element that created the event. The simplest way to access it is to create a twinspark extension that sets target to event.target:


None of these buttons have ts-action attribute, but when you click, the event is bubbled to the container that executes commands:
One Two Three