JavaScript API: Set state to Disabled or Hidden

When an object is set to the "Hidden" state in Storyline, it gets a .hidden class that applies display: none via CSS effectively removing it from view in the DOM.

Unlike other built-in states (e.g., Normal, Selected), the Hidden state can't hold additional objects or customizations. It's not a functional state in the same sense but more of a visibility toggle Storyline controls through CSS.

That’s my understanding based on how it behaves behind the scenes.

Here are two ways to apply the hidden "state" using JavaScript:

// Hide the element using the new Storyline JavaScript API object reference
const obj = object('6VGJk8yrPtO');
obj.style.display = 'none'; 

// Hide the same element by directly targeting its DOM node (mimicking how Storyline applies the "Hidden" state)
const objDOM = document.querySelector(`[data-model-id="${obj.name}"]`);
objDOM.classList.add('hidden');
// Shows the element again by removing the 'hidden' class
objDOM.classList.remove('hidden');