Hiding DOM elements

In this document
chevron_rightConstructor option
chevron_rightRelevant APIs

Hiding DOM elements is an essential aspect to a customizable UI. WebViewer UI supports hiding/showing elements both initially and dynamically.

linkFinding data-element attribute values

To hide/show the DOM elements, first you must find data-element attribute on the elements from a DOM inspector. For example, if we inspect the left panel,

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

linkConstructor option

To hide the DOM elements even before the initial render, you can use a constructor option disabledElements to pass a list of data-element values that should be hidden.

Example

const viewerElement = document.getElementById('viewer');
const viewerInstance = new PDFTron.WebViewer({
  l: 'YOUR_LICENSE_KEY',
  path: 'lib',
  ui: 'beta',
  disabledElements: [
    'viewControlsButton',
    'viewControlsOverlay'
  ]
}, viewerElement);

linkRelevant APIs

To hide/show the DOM elements on the fly, you can use the following APIs:

Note that these are different from opening/closing elements. Instead of changing visibility, these APIs will actually remove/re-render elements in the DOM.