通过单击原始元素或其他元素来切换可见性

Question

So I have a function that makes an element visible when called:

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

 <a class="button" href="#" onclick="toggle_visibility('first');">Button</a> <a class="url" id="first" href="#">First</a> <a class="button" href="#" onclick="toggle_visibility('second');">Button2</a> <a class="url" id="second" href="#">Second</a> 

And that works, but what I want is for an element to toggle off if I use the function for a different id. So if I first toggle on #first but then toggle on #second I want #first to toggle off.

Answer 1

Try this:

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

 <a class="button" href="#" onclick="toggle_visibility('first');">Button</a> <a class="url" style='display:block' id="first" href="#">First</a> <a class="button" href="#" onclick="toggle_visibility('second');">Button2</a> <a class="url" style='display:block' id="second" href="#">Second</a> 

Answer 2

This is one possible solution.

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

 <a class="button" href="#" onclick="toggle_visibility('first');">Button</a> <a class="url" id="first" href="#">First</a> <a class="button" href="#" onclick="toggle_visibility('second');">Button2</a> <a class="url" id="second" href="#">Second</a> 

Answer 3

You can try this

 toggle_visibility = function(id) { var all_urls = document.getElementsByClassName('url'); var e = document.getElementById(id); for(var i=0;i<all_urls.length;i++){ if(all_urls[i].id !== id) all_urls[i].style.display= 'none'; } if(e.style.display == 'block') e.style.display = 'none'; else e.style.display = 'block'; } 

 <a class="button" href="#" onclick="toggle_visibility('first');">Button</a> <a class="url" id="first" href="#">First</a> <a class="button" href="#" onclick="toggle_visibility('second');">Button2</a> <a class="url" id="second" href="#">Second</a>