---
name: "[up-expand]"
area: "API"
kind: "HTML attribute"
parent: "up.link module"
url: "https://unpoly.com/api/up-expand"
---
<nav aria-label="Unpoly docs">[All docs](https://unpoly.com/index.md) · [up.link module](https://unpoly.com/api/up.link.md)</nav>

# [up-expand]

Enlarges the click area of a descendant link. A click anywhere in the area does what a click on its link does.

When Unpoly follows the link, the area takes over the link's Unpoly attributes, like [`[up-target]`](https://unpoly.com/api/up-follow.md#up-target), [`[up-instant]`](https://unpoly.com/api/up-instant.md), or [`[up-preload]`](https://unpoly.com/api/up-preload.md). A click on the area then follows the link itself. Events like [`up:link:follow`](https://unpoly.com/api/up:link:follow.md) are emitted on the link, and the link is the [origin](https://unpoly.com/learn/targeting-fragments.md#referring-to-the-origin-element) of the fragment update.

<nav aria-label="Guides">

- [Learn: Elements that act like links or buttons](https://unpoly.com/learn/faux-interactive-elements.md)

</nav>

<nav aria-label="Contents">

#### Contents

- [Example](#example)
- [Multiple contained links](#multiple-contained-links)
- [Links that Unpoly doesn't follow](#links-that-unpoly-doesnt-follow)
- [Feedback classes](#feedback-classes)
- [Limitations](#limitations)
- [Modifying attributes](#attributes)

</nav>

## Example {#example}

```html
<div class="notification" up-expand>
  Record was saved!
  <a href="/records" up-follow>Close</a>
</div>
```

In the example above, clicking anywhere within the `.notification` element would [follow](https://unpoly.com/api/up.follow.md) the _Close_ link.

A click on another link, a form field, a button, a label or a `<summary>` within the area is left to that element. To keep the area from following a click on another element, prevent its [`up:click`](https://unpoly.com/api/up:click.md) event.

## Multiple contained links {#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:

```html
<div class="notification" up-expand="#close">
  Record was saved!
  <a id="details" href="/records/5" up-follow>Details</a>
  <a id="close" href="/records" up-follow>Close</a>
</div>
```

## Links that Unpoly doesn't follow {#links-that-unpoly-doesnt-follow}

When Unpoly doesn't [follow](https://unpoly.com/api/up.link.isFollowable.md) the expanded link, a click on the area clicks the link. The browser then does what the link does. A plain link makes a full page load, a `[download]` link downloads its file, and a `[target=_blank]` link opens a new tab.

To update a fragment instead, give the link an [`[up-follow]`](https://unpoly.com/api/up-follow.md) attribute or [follow all links](https://unpoly.com/learn/handling-all-links.md).

## Feedback classes {#feedback-classes}

Unpoly assigns the [`.up-active`](https://unpoly.com/api/up-active.md) 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:

```html
<div up-expand>
  <a href="/foo" up-follow>Foo</a>
  <a href="/bar" up-follow>Bar</a>
</div>
```

When either the `[up-expand]` container or the first link is clicked, the [`.up-active`](https://unpoly.com/api/up-active.md) class is assigned to both elements:

```html
<div up-expand class="up-active">
  <a href="/foo" up-follow class="up-active">Foo</a>
  <a href="/bar" up-follow>Bar</a>
</div>
```

When a non-expanded link is clicked, only that link becomes [`.up-active`](https://unpoly.com/api/up-active.md):

```html
<div up-expand>
  <a href="/foo" up-follow>Foo</a> <!-- not active -->
  <a href="/bar" up-follow class="up-active">Bar</a>
</div>
```

## Limitations {#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](https://makandracards.com/makandra/43549-it-s-ok-to-put-block-elements-inside-an-a-tag).

---

## Modifying attributes {#attributes}

> #### Info
>
> When Unpoly follows the expanded link, the enlarged click area takes over the link's Unpoly attributes.

### [up-expand] {#up-expand}

(optional)

A CSS selector that defines which containing link should be expanded.

If omitted, the first link in this element will be expanded.