---
name: "up.Preview.prototype.hideContent"
area: "API"
kind: "Instance method"
parent: "up.Preview class"
visibility: "experimental"
url: "https://unpoly.com/api/up.Preview.prototype.hideContent"
---
<nav aria-label="Unpoly docs">[All docs](https://unpoly.com/index.md) · [up.Preview class](https://unpoly.com/api/up.Preview.md)</nav>

# up.Preview.prototype.hideContent([element])

**This feature is experimental**. Please [share](https://github.com/unpoly/unpoly/discussions) your experiences so we know what to keep or change.

Temporarily [hides](https://unpoly.com/api/up.element.hide.md) the children of an element.

The children will be [shown](https://unpoly.com/api/up.element.show.md) when the preview [ends](https://unpoly.com/learn/previews.md#ending).

> #### Tip
>
> To visually remove elements during a preview, prefer hiding over detaching. See [Prefer additive changes](https://unpoly.com/learn/previews.md#prefer-additive-changes).

## Example {#example}

This preview visually replaces the children of the [targeted fragment](https://unpoly.com/api/up.Preview.prototype.fragment.md) with a `.spinner` element:

```js
up.preview('spinner', function(preview) {
  preview.hideContent()
  preview.insert('<span class="spinner">Please wait...</span>')
})
```

For a more concise way to temporarily swap children with a temporary element, see the [`swapContent()`](https://unpoly.com/api/up.Preview.prototype.swapContent.md) method.

---

## Parameters {#parameters}

### [element=this.fragment] {#element}

(optional)

The element or selector to hide the children of.

If omitted, the children of the [targeted fragment](https://unpoly.com/api/up.Preview.prototype.fragment.md) will be hidden.

Type: [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) | string