my code is working fine, but I would like to make a change where I didn't find answers just by searching. I'm looking for dynamic data for the sections below, but when I don't have data to populate, I'd like to hide the button, is that possible?
<style>
.elementor-editor-active .hidden{
display:block;
}
.hidden{
display: none;
}
.shown{
display: block !important;
}
</style>
<script>
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
var btn4 = document.getElementById("btn4");
btn1.onclick = function(event){
event.preventDefault();
toggleDivs("sect1");
};
btn2.onclick = function(event){
event.preventDefault();
toggleDivs("sect2");
};
btn3.onclick = function(event){
event.preventDefault();
toggleDivs("sect3");
};
btn4.onclick = function(event){
event.preventDefault();
toggleDivs("sect4");
};
function toggleDivs(s){
document.getElementById("sect1").classList.remove("shown");
document.getElementById("sect2").classList.remove("shown");
document.getElementById("sect3").classList.remove("shown");
document.getElementById("sect4").classList.remove("shown");
document.getElementById(s).classList.add("shown");
}
btn1.focus();
btn1.click();
</script>
I dont see your HTML tree, so I can't really give an accurate answer. But you can use mutationObserver, so you can observe your target element. If there is no data you can run a function to hide buttons.
Here is a snippet that will hide a button if the associated div is empty:
const divs=document.querySelectorAll("div"),
hideAll=()=>divs.forEach(d=>{ // hide all selected divs
if (d.innerHTML==="") // hide associated button too, if div is empty:
document.getElementById(d.id.replace("sect","btn")).style.display="none"
d.style.display="none"
});
document.onclick=ev=>{
if(ev.target.tagName==="BUTTON") {
if (ev.target.id){
hideAll();
document.getElementById(ev.target.id.replace("btn","sect")).style.display=""
} else {
divs[2].textContent="";
hideAll()
}
}}
hideAll();div {background-color:#ddd; padding:10px; margin:6px; border: 1px solid grey}<div id="sect1">This is section one</div>
<div id="sect2">This is section two</div>
<div id="sect3"><img src="https://picsum.photos/id/123/400/100"></div>
<div id="sect4">This is section four</div>
<button id="btn1">show one</button>
<button id="btn2">show two</button>
<button id="btn3">show three</button>
<button id="btn4">show four</button>
<br><br>
<button>empty div#sect3</button>