'How to simplify this code shared in image below?

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

javascriptloopsfor-loopif-statementconditional-statements


Solution 1:[1]

Use a class - add class="con" 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" class="toggle" data-id="con1">Con 1</button>
  <button type="button" class="toggle" data-id="con2">Con 2</button>
  <button type="button" class="toggle" data-id="con3">Con 3</button>
</nav>
<div id="con1" class="con" hidden>
  <h1>Con 1</h1>
</div>
<div id="con2" class="con"hidden>
  <h1>Con 2</h1>
</div>
<div id="con3" class="con" hidden>
  <h1>Con 3</h1>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions