Opening/closing elements programmatically

Technical Support
1

Hello,

I want the compare panel to open automatically without onClick when the compare page is loaded.
I want the class of data-element=“comparePanelToggleButton” to become class=“Button active hide-in-small-mobile”, which is class=“Button hide-in-small-mobile” in the first case.

I tried as follows, but console.log(comparePanelToggleButton) return null:
const comparePanelToggleButton = iframeDoc.querySelector(‘[data-element=“comparePanelToggleButton”]’);
console.log(comparePanelToggleButton)
if (comparePanelToggleButton) {
comparePanelToggleButton.classList.add(‘active’);
}

I tried instance.UI.openElements([ ‘comparePanelToggleButton’ ]); but it does not work.

Thanks for your support
Amir Kehtarian

1 Like
2

I have found the solution and share it here:

// some code…

UI.addEventListener(UI.Events.MULTI_VIEWER_READY, () => {
const [documentViewer1, documentViewer2] = Core.getDocumentViewers();
const startCompare = async () => {
const shouldCompare = documentViewer1.getDocument() && documentViewer2.getDocument();
if (shouldCompare) { // Check if both documents loaded before comparing
const afterColor = new Color(21, 205, 131, 0.4);
const beforeColor = new Color(255, 73, 73, 0.4);
const options = { beforeColor, afterColor };
const { doc1Annotations, doc2Annotations, diffCount } = await documentViewer1.startSemanticDiff(documentViewer2, options);
instance.UI.openElements([ ‘comparePanel’ ]); :point_left:
}
}

// some code…

1 Like