Sempre que tem muito código repetido significa que não está a fazer as coisas da melhor forma e acaba por dificultar mais à frente quando precisa de alterar ou manter o código. Pode refatorar o código um pouco utilizando um array para os `<div>` a mostrar/esconder e para cada click esconder todos os `<div>` e de seguida mostrar o que foi clicado. Exemplo: <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> const divs = [...document.querySelectorAll('#myDIV,#myDIV2,#myDIV3')]; const botoes = [...document.querySelectorAll("button")]; for (let i = 0; i < botoes.length; ++i){ //percorrer todos os botoes botoes[i].addEventListener("click", function(){ //definir o click para cada um divs.forEach(div => div.style.display = "none"); //esconder todos os divs divs[i].style.display = "block"; //mostrar o que foi clicado }); } divs.forEach(div => div.style.display = "none"); //iniciar todos escondidos <!-- language: lang-css --> #myDIV { width: 30%; padding: 50px 0; text-align: center; background-color: lightblue; margin: 0 auto; } #myDIV2 { width: 30%; padding: 50px 0; text-align: center; background-color: green; margin: 0 auto; display: none; } #myDIV3 { width: 30%; padding: 50px 0; text-align: center; background-color: red; margin: 0 auto; display: none; } <!-- language: lang-html --> <!DOCTYPE html> <html> <head> </head> <body> <p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p> <button>Botão 1</button> <button>Botão 2</button> <button>Botão 3</button> <div id="myDIV">This is my DIV element.</div> <div id="myDIV2">This is my DIV element.</div> <div id="myDIV3">This is my DIV element.</div> <p><b>Note:</b> The element will not take up any space when the display property set to "none".</p> </body> </html> <!-- end snippet --> Como atribui o evento de click diretamente no javascript tornou-se desnecessário ter o atributo `onclick` em cada um dos botões.