javascript toggle to show only one div at a time in a group

Question

The code below toggles individual divs correctly, however, it shows enabled divs below each other as I toggle but I need to " show only one at a time ". Any idea?

 function toggle_visibility(id) { var e = document.getElementById(id); if (e.style.display == 'block') e.style.display = 'none'; else e.style.display = 'block'; } 

 <ul class="post-advanced-menu"> <li><a href="#" onclick="toggle_visibility('source');">Source</a></li> <li><a href="#" onclick="toggle_visibility('share');">Share</a></li> <li><a href="#" onclick="toggle_visibility('report');">Report</a></li> </ul> <div id="post-advanced-content"> <div id="source" style="display: none;">Source</div> <div id="share" style="display: none;">Share</div> <div id="report" style="display: none;">Report</div> </div> 

Thanks,

Answer 1

You should hide other Elements before visible the selected one.

 function toggle_visibility(id) { const target = document.getElementById(id); if (!target) return; // Hide all other div elements. const divs = document.querySelectorAll('.div'); for (const div of divs) { div.style.display = 'none'; } // Show selected one target.style.display = 'block'; } 

 div { width: 20px; height: 20px; } #source { background: red; } #share { background: blue; } #report { background: green; } 

 <ul class="post-advanced-menu"> <li><a href="#" onclick="toggle_visibility('source');">Source</a></li> <li><a href="#" onclick="toggle_visibility('share');">Share</a></li> <li><a href="#" onclick="toggle_visibility('report');">Report</a></li> </ul> <!-- Source --> <div id="source" class="div" style="display: none;"></div> <!-- Share --> <div id="share" class="div" style="display: none;"></div> <!-- Report --> <div id="report" class="div" style="display: none;"></div> 

Answer 2

One solution is to hide other items before click.
It also hides the clicked div if it's visible.

You can add a class for each div. For example: class="item" , in order to help in the process.

<ul class="post-advanced-menu">
  <li><a href="#" onclick="toggle_visibility('source');">Source</a></li>
  <li><a href="#" onclick="toggle_visibility('share');">Share</a></li>
  <li><a href="#" onclick="toggle_visibility('report');">Report</a></li>
</ul>

<!-- Source -->
<div id="source" class="item" style="display: none;">1</div>

<!-- Share -->
<div id="share" class="item" style="display: none;">2</div>

<!-- Report -->
<div id="report" class="item" style="display: none;">3</div>

function toggle_visibility(id) {
  var e = document.getElementById(id);
  if (e.style.display == 'block') {
    e.style.display = 'none'
  } else {
    document.querySelectorAll('.item').forEach(function(div) {
       div.style.display = 'none';
    })
    e.style.display = 'block';
  }
}

Answer 3

I recommend unobtrusive script using class and data attributes:

 window.addEventListener("load", () => document.querySelectorAll(".post-advanced-menu").forEach( ele => ele.addEventListener("click", e => { var tgt = e.target; var id = tgt.getAttribute("data-id"); document.querySelectorAll(".toggle").forEach( ele => ele.style.display = ele.id == id ? "block" : "none") }) ) ) 

 .toggle { display: none } 

 <ul class="post-advanced-menu"> <li><a href="#" data-id="source">Source</a></li> <li><a href="#" data-id="share">Share</a></li> <li><a href="#" data-id="report">Report</a></li> </ul> <!-- Source --> <div id="source" class="toggle">Source</div> <!-- Share --> <div id="share" class="toggle">Share</div> <!-- Report --> <div id="report" class="toggle">Report</div>