up.link [up-expand]

HTML selector

Enlarges the click area of a descendant link.

[up-expand] honors all the Unpoly attributes in expanded links, like [up-target], [up-instant], or [up-preload].

Example

<div class="notification" up-expand>
  Record was saved!
  <a href="/?originalUrl=https%3A%2F%2Funpoly.com%2Frecords">Close</a>
</div>

In the example above, clicking anywhere within .notification element would follow the Close link.

Multiple contained links

If a container contains more than one link, you can set the value of the [up-expand] attribute to a CSS selector that defines which link should be expanded:

<div class="notification" up-expand="#close"> <!-- mark: #close -->
  Record was saved!
  <a id="details" href="/?originalUrl=https%3A%2F%2Funpoly.com%2Frecords%2F5">Details</a>
  <a id="close" href="/?originalUrl=https%3A%2F%2Funpoly.com%2Frecords">Close</a> <!-- mark: id="close" -->
</div>

Feedback classes

Unpoly assigns the .up-active class to clicked links while they are loading. This class is assigned to both the expanded link and the expanded click area.

Assume this [up-expand] container with two contained links:

<div up-expand>
  <a href="/?originalUrl=https%3A%2F%2Funpoly.com%2Ffoo">Foo</a>
  <a href="/?originalUrl=https%3A%2F%2Funpoly.com%2Fbar">Bar</a>
</div>

When either the [up-expand] container or the first link is clicked, the .up-active class is assigned to both elements:

<div up-expand class="up-active"> <!-- mark: class="up-active" -->
  <a href="/?originalUrl=https%3A%2F%2Funpoly.com%2Ffoo" class="up-active">Foo</a> <!-- mark: class="up-active" -->
  <a href="/?originalUrl=https%3A%2F%2Funpoly.com%2Fbar">Bar</a>
</div>

When a non-expanded link is clicked, only that link becomes .up-active:

<div up-expand>
  <a href="/?originalUrl=https%3A%2F%2Funpoly.com%2Ffoo">Foo</a> <!-- chip: not active -->
  <a href="/?originalUrl=https%3A%2F%2Funpoly.com%2Fbar" class="up-active">Bar</a> <!-- mark: class="up-active" -->
</div>

Limitations

[up-expand] has some limitations for advanced browser users:

• Users won't be able to right-click the expanded area to open a context menu.
• Users won't be able to CTRL+click the expanded area to open a new tab.

To overcome these limitations, consider nesting the entire clickable area in an actual <a> tag. It's OK to put block elements inside an anchor tag.