Las tabs Javascript de Vainilla no se cerrarán al hacer clic

Intenté codificar Javascript vano que abre y cierra botones (tabs) y muestra contenido.

Muestran el contenido correctamente, pero no ocultan el contenido una vez que se hace clic.

He ‘ingeniería inversa’ el código que abre la pestaña, pero este código oculta el contenido y el botón cuando se hace clic.

Claramente, mi código es incorrecto, pero siento que estoy muy cerca de lograr lo que me propongo. Así que estoy buscando editar el código existente, no intente no cambiar nada drásticamente.

Aclamaciones

function openTab(click, openTab) { var i; var content; var link; content = document.getElementsByClassName("content"); for (i = 0; i < content.length; i++) { content[i].style.display = "none"; } links = document.getElementsByClassName("link"); for (i = 0; i < links.length; i++) { links[i].className = links[i].className.replace("active", ""); } document.getElementById(openTab).style.display = "block"; for (i = 0; i < links.length; i++) { click.currentTarget.className += "active"; } document.getElementById(openTab).style.display = "active"; click.currentTarget.style.display = "none"; } 

 

El código que publicaste tenía un comportamiento confuso (como que los botones desaparecieran por completo). Eliminé la línea que hacía desaparecer los botones, así como dos bucles diferentes que parecían entrar en conflicto entre sí con respecto al nombre de clase de los enlaces.

Edité el código en algo simple que muestra el contenido de acuerdo con el botón presionado, pero sospecho que he entendido mal algo y estás buscando algo más. ¿Tal vez puedas aclarar lo que falta?

 function openTab(click, openTab) { var i; var content; var wasOpen = document.getElementById(openTab).style.display === "block"; content = document.getElementsByClassName("content"); for (i = 0; i < content.length; i++) { content[i].style.display = "none"; } if (wasOpen) return; document.getElementById(openTab).style.display = "block"; }