mostrar/esconder
Olá pessoal! Juro que quebrei a cabeça, mas como sempre, não estou enxergando algo. Se puderem me ajudar agradeço. Gostaria de apertar na <label> Entrar e aparecer o <form id="formlogin">, ao clicar novamente ele desaparecesse, e eu consegui fazer isso, mas eu quero **também **que ao clicar na <label> Cadastrar, o #formlogin desaparecesse e ficasse o #formcadas e vice-versa. Eis o código:
<head>
<style type="text/css">
* { margin:0; padding:0; box-sizing:border-box; }
button {
border: none;
background-color: white;
display:inline;}
#folo{
position: relative;
top: 3px;
left: 30px;
background-color:lightgrey;
max-width: 133px;
}
</style>
<head>
<body>
<div id="folo" >
<label id="entrarbtn" onclick="mostra();">Entrar</label> |<label onclick="mostra();"id="cadasbtn" onclick=""> Cadastro</label>
</div>
<form id="formlogin" style="position: relative; top: 3px; left: 30px; display:none;">
nome/e-mail:<br/>
<input type="" name=""><br/>
senha:<br/>
<input type="" name=""><br/>
<button>entrar</button>
</form>
<form id="formcadas" style="position: relative; top: 3px; left: 30px; display:none;">
nome/e-mail:<br/>
<input type="" name=""><br/>
senha:<br/>
<input type="" name=""><br/>
<button>cadastrar</button>
</form>
<script type="text/javascript">
function mostra(){
var login = document.getElementById("formlogin");
if (login.style.display ==="none"){login.style.display = "inline-block";}
else{ login.style.display ="none"}
}
function mostraum(){
var cadas = document.getElementById("formcadas");
if (cadas.style.display === "none"){cadas.style.display = "inline-block";}
else{cadas.style.display = "none";}
}
</script>
</hmtl>
Desse jeito funciona, mas as divs aparecem uma ao lado da outra e não é isso que eu queria. Agradeço desde já!Discussão (3)
Carregando comentários...