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="/records">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 to define which link should be expanded:

<div class="notification" up-expand="#close"> <!-- mark: #close -->
  Record was saved!
  <a id="details" href="/records/5">Details</a>
  <a id="close" href="/records">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 expanding link and the expanded click area.

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

<div up-expand>
  <a href="/foo">Foo</a>
  <a href="/bar">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="/foo" class="up-active">Foo</a> <!-- mark: class="up-active" -->
  <a href="/bar">Bar</a>
</div>

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

<div up-expand>
  <a href="/foo">Foo</a> <!-- chip: not active -->
  <a href="/bar" 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.