> 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/ui-customization/hiding-elements.md).

# Hide and Show DOM Elements in the PDF Viewer Using JavaScript

Learn how to hide/show DOM elements in a customizable UI with WebViewer. Find data-element attribute values and use constructor options for dynamic element control. Explore APIs for enabling/disabling

Hiding or customizing visual components is a key part of tailoring the WebViewer UI to your application’s needs. With Webviewer UI you can leverage its modularity to hide visual elements from headers, but also use `data-elements` to hide specific elements in other areas such as panels and modals.

## Hiding Elements with the Modular UI

With the introduction of the [Modular UI](/web/ui-customization/modular-ui/getting-started.md), you no longer need to rely on `data-element` attributes to show or hide individual controls. Instead, you can use the Modular UI APIs to replace entire groups of items in one go—giving you far more flexibility.

For example, suppose you only want the **Shapes** and **Edit** ribbons in your toolbar. Instead of hiding every other ribbon by its `data-element`, you can filter out the ones you don’t need and call `setItems`:

{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}

```js
WebViewer({ /* …options */ }, viewerElement).then(instance => {
  const { UI } = instance;
  // Grab the default ribbon group
  const ribbonGroup = UI.getRibbonGroup('default-ribbon-group');

  // Keep only the Shapes and Edit ribbons
  const filteredItems = ribbonGroup.items.filter(item =>
    item.dataElement === 'toolbarGroup-Shapes' ||
    item.dataElement === 'toolbarGroup-Edit'
  );

  // Replace the entire group with your filtered list
  ribbonGroup.setItems(filteredItems);
  });
```

{% endcode %}
{% endtab %}
{% endtabs %}

[UI.getRibbonGroup](https://sdk.apryse.com/api/web/UI.html#.getRibbonGroup) [RibbonGroup.setItems](https://sdk.apryse.com/api/web/UI.Components.RibbonGroup.html#setItems)

This approach also works for removing dividers or any other components: simply filter them out of the items array and call `setItems` on the container, header, or grouped-items you’re targeting. In the previous example, we filtered by `dataElement`, but you can also filter by other properties, such as `type`.

For instance, to remove all dividers from the Default Top Header, which are located in the `groupedLeftHeaderButtons` container, you could write:

{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}

```js
WebViewer({ /* …options */ }, viewerElement).then(instance => {
  const { UI } = instance;
  // Get the grouped-items container for the left side of the top header
  const groupedLeft = UI.getGroupedItems('groupedLeftHeaderButtons');

  // Filter out any items whose type is "divider"
  const withoutDividers = groupedLeft.items.filter(item => item.type !== 'divider');

  // Replace with the filtered list
  groupedLeft.setItems(withoutDividers);
});
```

{% endcode %}
{% endtab %}
{% endtabs %}

[UI.getGroupedItems](https://sdk.apryse.com/api/web/UI.html#.getGroupedItems__anchor) [GroupedItems.setItems](https://sdk.apryse.com/api/web/UI.Components.GroupedItems.html#setItems)

## Hiding by finding data-element attribute values

For non-Modular UI components, you can still hide or show DOM elements by targeting their `data-element` attribute. To find the correct value, inspect the element in the DOM. For example, if we inspect the left panel,

![](https://3532544125-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX9YnTSKIHvV7m0A36LbO%2Fuploads%2Fgit-blob-b694cd9eeaaded85d6cff9a6280881b8b1ef35c0%2Fef28f6d9207aed7a396265fb5b11d9a7686d93af-754x99.png?alt=media)

we can find that it has a `data-element` value of `leftPanel`. Now we can use that value to hide/show it.

{% hint style="info" %}
You can view the full list of data elements in our [open source UI repo](https://github.com/ApryseSDK/webviewer-ui/blob/11.8/src/constants/dataElement.js).
{% endhint %}

## Constructor option

If you wish to disable elements before the initial render there are two options. You can disable by loading an initial configuration file that only includes the items you wish to render, or you can pass a list of `data-elements`that you wish to disable.

#### Using a configuration file

This can be done using a JSON config file in which you can define the [Modular Components](/web/ui-customization/modular-ui/ui-import-and-export.md#modular-components) (ie. Buttons, Ribbon Items, Grouped Items), [Modular Headers](/web/ui-customization/modular-ui/ui-import-and-export.md#modular-headers), [Flyouts](/web/ui-customization/modular-ui/ui-import-and-export.md#flyouts), and [Panels](/web/ui-customization/modular-ui/ui-import-and-export.md#panels) that you want to use and then importing it into the UI.

{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}

```js
Webviewer.WebComponent(
  {
    path: '/path/to/your/webviewer',
    initialDoc: '/path/to/your/document.pdf',
  },
  viewerElement
).then((instance) => {
  const configUI = {
    "modularComponents": {
      "myButton": {
        "type": "customButton",
        "dataElement": "myButton",
        "label": "My Button",
        "onClick": "alertClick"
      },
      "flyoutToggle": {
        "type": "toggleButton",
        "img": "ic-hamburger-menu",
        "dataElement": "flyoutToggle",
        "toggleElement": "myFlyout"
      },
      "flyoutFirstButton": {
        "type": "customButton",
        "dataElement": "flyoutFirstButton",
        "label": "Flyout First Button",
        "children": [
          "flyoutSecondButton"
        ]
      },
      "flyoutSecondButton": {
        "type": "customButton",
        "dataElement": "flyoutSecondButton",
        "label": "Flyout Second Button",
        "onClick": "flyoutSecondButtonOnClick"
      },
      "searchPanelToggle": {
        "type": "toggleButton",
        "img": "icon-header-search",
        "dataElement": "searchPanelToggle",
        "toggleElement": "myPanel"
      }
    },
    "modularHeaders": {
      "myHeader": {
        "dataElement": "myHeader",
        "placement": "top",
        "items": [
          "flyoutToggle",
          "myButton",
          "searchPanelToggle"
        ]
      }
    },
    "panels": {
      "myPanel": {
        "dataElement": "myPanel",
        "location": "left",
        "render": "searchPanel"
      }
    },
    "flyouts": {
      "myFlyout": {
        "dataElement": "myFlyout",
        "items": [
          "flyoutFirstButton"
        ]
      }
    }
  };

  const functionMap = {
    'alertClick': () => alert('Alert triggered!'),
    'flyoutSecondButtonOnClick': () => {
      console.log('Second Item clicked!');
    },
  };

  instance.UI.importModularComponents(configUI, functionMap);
});
```

{% endcode %}
{% endtab %}
{% endtabs %}

[importModularComponents](https://sdk.apryse.com/api/web/UI.html#.importModularComponents__anchor)

In the example above, a [functionMap](/web/ui-customization/modular-ui/ui-import-and-export.md#adding-a-function-map) is also used to define the onClick functions for the buttons. For more details on the import and export of configurations and the usage of functionMaps please refer to [this](/web/ui-customization/modular-ui/ui-import-and-export.md) guide.

#### Disabling using a list of data-elements

Pass a list of `data-elements` in the `disabledElements` constructor option to hide elements.

**Example**

{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}

```js
const wvElement = document.getElementById('viewer');
WebViewer({
  path: 'lib',
  disabledElements: [
    'leftPanel',
    'viewControlsButton',
    'viewControlsOverlay'
  ]
}, wvElement);
```

{% endcode %}
{% endtab %}
{% endtabs %}

## Enabling/disabling elements programmatically

To enable/disable the DOM elements, you can use the following APIs:

**Example**

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

```js
const wvElement = document.getElementById('viewer');
WebViewer({ ...options }, wvElement).then(() => {
  // remove left panel and left panel button from the DOM
  instance.UI.disableElements([ 'leftPanel', 'leftPanelButton' ]);
  // re-enable left panel and left panel button from the DOM
  instance.UI.enableElements([ 'leftPanel', 'leftPanelButton' ]);
});
```

{% endcode %}
{% endtab %}

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

```js
const wvElement = document.getElementById('viewer');
WebViewer({ ...options }, wvElement).then(() => {
  // remove left panel and left panel button from the DOM
  instance.disableElements([ 'leftPanel', 'leftPanelButton' ]);
  // re-enable left panel and left panel button from the DOM
  instance.enableElements([ 'leftPanel', 'leftPanelButton' ]);
});
```

{% endcode %}
{% endtab %}
{% endtabs %}

* [disableElements](https://sdk.apryse.com/api/web/UI.html#disableElements__anchor)
* [enableElements](https://sdk.apryse.com/api/web/UI.html#enableElements__anchor)
* [isElementDisabled](https://sdk.apryse.com/api/web/UI.html#isElementDisabled__anchor)

Note that these are different from opening/closing elements. Instead of changing visibility, these APIs will actually remove/re-render elements in the DOM. To change visibility, you can refer to the sample below.

## Opening/closing elements programmatically

You can toggle panels, overlays, popups, and modals.

**Example**

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

```js
const wvElement = document.getElementById('viewer');
WebViewer({ ...options }, wvElement).then(() => {
  // opens (shows) text popup and annotation popup in the UI
  instance.UI.openElements([ 'menuOverlay', 'leftPanel' ]);
  // closes (hides) text popup and left panel in the UI
  instance.UI.closeElements([ 'menuOverlay', 'leftPanel' ]);
});
```

{% endcode %}
{% endtab %}

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

```js
const wvElement = document.getElementById('viewer');
WebViewer({ ...options }, wvElement).then(() => {
  // opens (shows) text popup and annotation popup in the UI
  instance.openElements([ 'menuOverlay', 'leftPanel' ]);
  // closes (hides) text popup and left panel in the UI
  instance.closeElements([ 'menuOverlay', 'leftPanel' ]);
});
```

{% endcode %}
{% endtab %}
{% endtabs %}

* [closeElements](https://sdk.apryse.com/api/web/UI.html#closeElements__anchor)
* [openElements](https://sdk.apryse.com/api/web/UI.html#openElements__anchor)


---

# 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/ui-customization/hiding-elements.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.