Solved Code to hide elements in frontend, hide them also in backend.

Hi, Friends

I need a hand to solve this.

I found the right code for synchronizing elements with the timing of video, however, to edit the sections on this page I have to temporarily delete the code module, edit everytinhg and then call it back again when my edition is finished, because the code hide the sections, elements also in the backend.

The code I am talking about is:

Code:

<style>.delay { display: none }</style>

<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
/* Change the value 10 for the seconds where the sections will appear */
var SECONDS_TO_DISPLAY = 10;
var CLASS_TO_DISPLAY = ".delay";
/* From now on don't have to change */
var attempts = 0;
var elsHiddenList = [];
var elsDisplayed = false;
var elsHidden = document.querySelectorAll(CLASS_TO_DISPLAY);
var alreadyDisplayedKey = "alreadyElsDisplayed" + SECONDS_TO_DISPLAY;
var alreadyElsDisplayed = null;
try {
    alreadyElsDisplayed = localStorage.getItem(alreadyDisplayedKey);
} catch(e) {
    console.warn('Failed to read data from localStorage: ', e);
}
setTimeout(function () { elsHiddenList = Array.prototype.slice.call(elsHidden); }, 0);
var showHiddenElements = function () {
elsDisplayed = true;
elsHiddenList.forEach((e) => e.style.display = "block");
try {
  localStorage.setItem(alreadyDisplayedKey, true);
} catch (e) {
  console.warn('Failed to save data in localStorage: ', e);
}
}
var startWatchVideoProgress = function () {
if (typeof smartplayer === 'undefined' || !(smartplayer.instances && smartplayer.instances.length)) {
if (attempts >= 10) return;
attempts += 1;
return setTimeout(function () { startWatchVideoProgress() }, 1000);
}
smartplayer.instances[0].on('timeupdate', () => {
if (elsDisplayed || smartplayer.instances[0].smartAutoPlay) return;
if (smartplayer.instances[0].video.currentTime < SECONDS_TO_DISPLAY) return;
showHiddenElements();
})
}
if (alreadyElsDisplayed === 'true') {
setTimeout(function () { showHiddenElements(); }, 100);
} else {
startWatchVideoProgress()
}
});
</script>

 

Fantastic!! Perfect!

Thank you, my friend.