Toggle Modal mit Vanille Javascript

Question

Ich bin es gewohnt, mit jQuery zu arbeiten, aber ich versuche, zurück zu Vanille-Javascript zu bekommen. Ich habe einen Link, der, wenn er geklickt wird, ein Konto modal enthüllt.

Ich möchte auch die Klasse des Modals ändern, wenn auf "Modal-sichtbar" geklickt wird. Dies funktioniert wie erwartet, aber wenn ich erneut auf den Link klicke, um das Modal zu schließen, muss die Klasse wieder auf "Modal-versteckt" wechseln.

Ich fragte mich, ob jemand mir dabei helfen könnte. Vielleicht braucht es stattdessen einen Schalter?

var accountModal = document.getElementById("account-modal"); 
document.querySelector('#account-photo').addEventListener('click', function(e) { 
    e.preventDefault(); 
    accountModal.classList.add('modal-visible'); 
    accountModal.classList.remove('modal-hidden'); 
    accountModal.setAttribute('aria-hidden', 'false'); 
}); 

<a id="account-photo" href="/customer" tabindex="0" aria-expanded="false">Account</a> 
<div id="account-modal" class="modal-visible" aria-label="Account Information" aria-hidden="false">Account Info</div> 

Answer 1

Hier ist ein Weg, es zu tun, wenn wir es immer davon ausgehen, geschlossen beginnt:

document.querySelector('#account-photo').addEventListener('click', function() {var is_visible = false; return function(e) { 
    e.preventDefault(); 
    if(!is_visible) { 
     accountModal.classList.add('modal-visible'); 
     accountModal.classList.remove('modal-hidden'); 
     accountModal.setAttribute('aria-hidden', !is_visible); 
     is_visible = true; 
    } else { 
     accountModal.classList.remove('modal-visible'); 
     accountModal.classList.add('modal-hidden'); 
     accountModal.setAttribute('aria-hidden', !is_visible); 
     is_visible = false; 
    } 
}}); 

Diese Methode grundsätzlich als manuell codiert Toggle wirkt.