> For the complete documentation index, see [llms.txt](https://docs.apryse.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.apryse.com/web/annotation/annotationmanager/annotation-visibility.md).

# Toggling annotation visibility using the AnnotationManager

Learn how to toggle annotation visibility efficiently using the AnnotationManager. Control which annotations are displayed or hidden with ease using web. The Apryse Web SDK streamlines secure, serverl

Annotations are made to annotate content, but occasionally you may want to hide certain annotations. This can be done through the `AnnotationManager` or through the annotations directly. This guide will cover both approaches so that you can control the annotations as you need.

## Hiding annotations with the AnnotationManager

Hiding annotations through the AnnotationManager can be done through two APIs: [`hideAnnotation`](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#hideAnnotation) and [`hideAnnotations`](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#hideAnnotations). Providing an annotation or an array of annotations to these APIs respectively will hide the annotations. This will change the `Hidden` property on the annotations.

{% tabs %}
{% tab title="JavaScript (SDK v8.0+)" %}
{% code lineNumbers="true" %}

```js
const { annotationManager } = instance.Core;

const annots = annotationManager.getAnnotationsList().filter(annot => annot.PageNumber === 1);
// Hide annotations on the first page
annotationManager.hideAnnotations(annots);
```

{% endcode %}

[AnnotationManager.getAnnotationsList](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#getAnnotationsList__anchor) [AnnotationManager.hideAnnotation](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#hideAnnotation) [AnnotationManager.hideAnnotations](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#hideAnnotations)
{% endtab %}

{% tab title="JavaScript (SDK v6.0+)" %}
{% code lineNumbers="true" %}

```js
const { annotManager } = instance;

const annots = annotManager.getAnnotationsList().filter(annot => annot.PageNumber === 1);
// Hide annotations on the first page
annotManager.hideAnnotations(annots);
```

{% endcode %}

[AnnotationManager.getAnnotationsList](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#getAnnotationsList__anchor) [AnnotationManager.hideAnnotation](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#hideAnnotation) [AnnotationManager.hideAnnotations](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#hideAnnotations)
{% endtab %}
{% endtabs %}

{% hint style="info" %}
This API essentially switches the **Hidden** property on annotations to **true**.
{% endhint %}

## Showing annotations with the AnnotationManager

The APIs [`showAnnotation`](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#showAnnotation) and [`showAnnotations`](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#showAnnotations) will show annotations that were hidden through the AnnotationManager. Providing an annotation or an array of annotations to these APIs respectively will show the annotations.

{% tabs %}
{% tab title="JavaScript (SDK v8.0+)" %}
{% code lineNumbers="true" %}

```js
const { annotationManager } = instance.Core;

const annots = annotationManager.getAnnotationsList().filter(annot => annot.PageNumber === 1);
// Show hidden annotations on the first page
annotationManager.showAnnotations(annots);
```

{% endcode %}

[AnnotationManager.showAnnotation](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#showAnnotation) [AnnotationManager.showAnnotations](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#showAnnotations)
{% endtab %}

{% tab title="JavaScript (SDK v6.0+)" %}
{% code lineNumbers="true" %}

```js
const { annotManager } = instance;

const annots = annotManager.getAnnotationsList().filter(annot => annot.PageNumber === 1);
// Show hidden annotations on the first page
annotManager.showAnnotations(annots);
```

{% endcode %}

[AnnotationManager.showAnnotation](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#showAnnotation) [AnnotationManager.showAnnotations](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#showAnnotations)
{% endtab %}
{% endtabs %}

## Hiding/showing annotations using properties

There are two properties on annotations that can be used to toggle their visibility. One was briefly mentioned in the section above, `Hidden`. The other is the `NoView` property. Depending on what you might be looking to do.

### Using the `Hidden` property

Setting the `Hidden` property to `true` on an annotation will hide the annotation completely. Along with not being rendered, users cannot interact with it and it will also not be printed. Using either the [`hideAnnotation`](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#hideAnnotation) or [`hideAnnotations`](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#hideAnnotations) APIs will change this property.

{% tabs %}
{% tab title="JavaScript (SDK v8.0+)" %}
{% code lineNumbers="true" %}

```js
const { annotationManager } = instance.Core;

annotationManager.getAnnotationsList().filter(annot => {
  annot.Hidden = true;
  // Always redraw annotation if rendering was updated
  annotationManager.redrawAnnotation(annot);
});
```

{% endcode %}

[AnnotationManager.redrawAnnotation](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#redrawAnnotation)
{% endtab %}

{% tab title="JavaScript (SDK v6.0+)" %}
{% code lineNumbers="true" %}

```js
const { annotManager } = instance;

annotManager.getAnnotationsList().filter(annot => {
  annot.Hidden = true;
  // Always redraw annotation if rendering was updated
  annotManager.redrawAnnotation(annot);
});
```

{% endcode %}

[AnnotationManager.redrawAnnotation](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#redrawAnnotation)
{% endtab %}
{% endtabs %}

### Using the `NoView` property

The `NoView` property on the annotation will also hide/show annotations. Like the `Hidden` property, the annotations will not render and users cannot interact with it. However, it can be printed.

{% tabs %}
{% tab title="JavaScript (SDK v8.0+)" %}
{% code lineNumbers="true" %}

```js
const { annotationManager } = instance.Core;

annotationManager.getAnnotationsList().filter(annot => {
  annot.NoView = true;
  // Always redraw annotation if rendering was updated
  annotationManager.redrawAnnotation(annot);
});
```

{% endcode %}

[AnnotationManager.redrawAnnotation](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#redrawAnnotation)
{% endtab %}

{% tab title="JavaScript (SDK v6.0+)" %}
{% code lineNumbers="true" %}

```js
const { annotManager } = instance;

annotManager.getAnnotationsList().filter(annot => {
  annot.NoView = true;
  // Always redraw annotation if rendering was updated
  annotManager.redrawAnnotation(annot);
});
```

{% endcode %}

[AnnotationManager.redrawAnnotation](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#redrawAnnotation)
{% endtab %}
{% endtabs %}

## Next steps

If you need really complex rendering logic, you can consider [building](/web/annotation/customize/custom-annotations.md) it into annotations instead.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.apryse.com/web/annotation/annotationmanager/annotation-visibility.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.