Toggle Sichtbarkeit mit Klick auf Originalelement oder ein anderes Element

Question

So habe ich eine Funktion, die ein Element sichtbar macht, wenn sie aufgerufen:

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>

Und das funktioniert, aber was ich will, ist für eine Element zum Ausschalten, wenn ich die Funktion für eine andere ID verwende. Also, wenn ich zuerst # # zuerst wechsle aber dann # Sekunde einschalte, möchte ich # zuerst ausschalten.

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

Dies ist eine mögliche Lösung.

 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

können Sie versuchen, diese

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>