Pesquisar na Comunidade
Mostrando resultados para as tags ''togle''.
Encontrado 1 registro
-
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á!
