Tenho dois botões já com ids específicos. O Botão hide tumor é visível e o Botão show tumor está escondido (hidden) inicialmente. Como fazer o botão show tumor aparecer e o botão hide tumor desaparecer ao clicar no botão hide tumor e depois como fazer o botão hide tumor aparecer e o botão show tumor desaparecer quando clicar no botão show tumor (toggle)?
hide tumor show tumor-
<div class="controls" id="controls"> <button id="hide-tumor">hide tumor</button> <button hidden id="show-tumor">show tumor</button> </div>. Esse é basicamente o código– Pedro HoffCommented 7/04/2022 às 12:12
-
Por favor, edite a pergunta para limitá-la a um problema específico com detalhes suficientes para identificar uma resposta adequada.– Comunidade BotCommented 7/04/2022 às 12:31
Adicione um comentário
|
1 Resposta
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:
function toggle() {
const hideTumor = document.querySelector('#hide-tumor')
const showTumor = document.querySelector('#show-tumor')
showTumor.classList.toggle('hide')
hideTumor.classList.toggle('hide')
}
.hide {
visibility: hidden;
}
<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>
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.
-
Muito obrigado pela resposta! Um outro problema surgiu: Como manter esses mesmos dois botões na mesma posição quando apertados? Commented 7/04/2022 às 13:51
-
Sua resposta pode ser melhorada adicionando informações fundamentais. Basta editar para adicionar mais detalhes, como citações ou documentação para que outras pessoas possam confirmar que sua resposta está correta. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.– Comunidade BotCommented 7/04/2022 às 14:47
-
Oi Pedro, tudo bem? Eu acho que ai vc deveria criar uma regra de CSS. Mas eu te recomendaria pensar na possibilidade de usar uma lógica diferente da atual, quem sabe ter apenas um botão, e esse botão ele troca o texto que está escrito quando clicado. Commented 7/04/2022 às 16:20