Toggle Divs (sem css) – Blog – Devdata Sistemas

Se você está buscando uma solução simples e direta com o uso do atributo onclick para alternar entre a visualização de DIVS sem a necessidade de estilos CSS, aqui está uma ideia:

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div id="div1">Conteúdo da DIV 1</div>
<div id="div2" style="display: none;">Conteúdo da DIV 2</div>
<a href="#" onclick="toggleDivs(); return false;">Clique para trocar as DIVs</a>

<script>
function toggleDivs() {
  var div1 = document.getElementById("div1");
  var div2 = document.getElementById("div2");

  if (div1.style.display === "block" || div1.style.display === "") {
    div1.style.display = "none";
    div2.style.display = "block";
  } else {
    div1.style.display = "block";
    div2.style.display = "none";
  }
}
</script>

</body>
</html>

Neste exemplo, as duas DIVs são alternadas usando o estilo display inline. O atributo onclick no link chama a função toggleDivs() quando o link é clicado e return false; evita o recarregamento da página.

Lembre-se de que a abordagem anterior não segue as melhores práticas de separação entre HTML, CSS e JavaScript. Em projetos reais, é recomendado usar classes CSS para controlar a exibição (como mostrado nos exemplos anteriores) para manter um código mais organizado e manutenível.

Related Posts