Hide "btn 2" when DIV "sec2" is empty-CodePudding

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>

CodePudding user response：

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.

CodePudding user response：

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>