How to simplify this code shared in image below?-CodePudding

I want to show div content on button click .and thee is 3 different button following 3 different content. I tried this logic and it made my code lengthy. how to simplify is code using loop or condition?

 function replace1(){
            document.getElementById("con1").style.visibility="visible";
           
            document.getElementById("con2").style.visibility="hidden";
            document.getElementById("con3").style.visibility="hidden";
            document.getElementById("con4").style.visibility="hidden";
            document.getElementById("con5").style.visibility="hidden";
            document.getElementById("con6").style.visibility="hidden";
           
        }
        function replace2(){
            document.getElementById("con1").style.visibility="hidden";
            document.getElementById("con2").style.visibility="visible";
           
            document.getElementById("con3").style.visibility="hidden";
            document.getElementById("con4").style.visibility="hidden";
            document.getElementById("con5").style.visibility="hidden";
            document.getElementById("con6").style.visibility="hidden";
           
        }
        function replace3(){
            document.getElementById("con1").style.visibility="hidden";
            document.getElementById("con2").style.visibility="hidden";
            document.getElementById("con3").style.visibility="visible";
           
            document.getElementById("con4").style.visibility="hidden";
            document.getElementById("con5").style.visibility="hidden";
            document.getElementById("con6").style.visibility="hidden";
           
        }

enter image description here

CodePudding user response：

Use a class - add to each element - also use hidden instead of visibility since the hidden divs still will take up space

const toggle = id => cons
  .forEach(con => con.hidden = con.id !== id);

Here is a version that will change the colour of the button too.

You will need to use hidden or display:none to have the divs stay in one place

window.addEventListener('DOMContentLoaded', function() {
  const cons = document.querySelectorAll('.con');
  const buts = document.querySelectorAll('.toggle');

  const toggle = id => cons
    .forEach(con => con.hidden = con.id !== id);

  document.getElementById('nav').addEventListener('click', function(e) {
    const tgt = e.target.closest('button');
    if (tgt.classList.contains('toggle')) {
      toggle(tgt.dataset.id)
      buts.forEach(but => but.classList.remove('active'));
      tgt.classList.add('active');
    }
  })
})

.active {
  background-color: green;
}

<nav id="nav">
  <button type="button"  data-id="con1">Con 1</button>
  <button type="button"  data-id="con2">Con 2</button>
  <button type="button"  data-id="con3">Con 3</button>
</nav>
<div id="con1"  hidden>
  <h1>Con 1</h1>
</div>
<div id="con2" hidden>
  <h1>Con 2</h1>
</div>
<div id="con3"  hidden>
  <h1>Con 3</h1>
</div>

CodePudding user response：

.active-button {
    background: red;
}

<button  onclick="replace(1, this)"></button>
<button  onclick="replace(2, this)"></button>
<button  onclick="replace(3, this)"></button>

function replace(visibleIndex, _this) {
    const buttons = document.querySelectorAll('.replace-button');
    buttons.forEach(button => button.classList.remove("active-button"));
    _this.classList.add("active-button");

    for(let i = 1; i < 7; i  ) {
        let element = document.getElementById("con"   i)
        i === visibleIndex ? element.style.visibility = "visible" : element.style.visibility = "hidden";
    }
}