Переключить видимость с нажатием на оригинальный элемент или другой элемент

Question

Так я функция, которая делает элемент видимым при вызове:

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>

И это работает, но то, что я хочу, это элемент для переключения, если я использую функцию для другого id. Поэтому, если я сначала переключусь на #first, а затем переключился на # секунду, я хочу, чтобы # сначала отключился.

Answer 1

Попробуйте это:

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

Это один из возможных решений.

 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

Вы можете попробовать это

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>