Então isso pode ser resolvido usando a função `toggle` do javascript, basicamente o toggle ele fica trocando o atributo da função toda vez que é invocado. Exemplo: <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> function toggle() { const hideTumor = document.querySelector('#hide-tumor') const showTumor = document.querySelector('#show-tumor') showTumor.classList.toggle('hide') hideTumor.classList.toggle('hide') } <!-- language: lang-css --> .hide { visibility: hidden; } <!-- language: lang-html --> <div class="controls" id="controls"> <button onclick="toggle()" id="hide-tumor">hide tumor</button> <button onclick="toggle()" class="hide" id="show-tumor">show tumor</button> </div> <!-- end snippet --> Na função 'toggle', eu falo para ele ficar alternando a class 'hide', então toda hora que clico nos botões a classe é retirada de um botão e colocada em outro.