toggle jquery non va,aiuto!
Salve ragazzi,sono sempre io,quello che non capisce niente di javascript e jquery.
devo realizzare questo effetto:
Codice HTML:
<!DOCTYPE html>
<html>
<head>
<style>
p { width:400px; }
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<button>Toggle</button>
<p class="p1">
Visualizzato all'inizio
</p>
<p class="p2">
visualizzato dopo
</p>
<style>
.p2{display:none;}
</style>
<script>
$("button").click(function () {
$(".p1").slideToggle("slow");
$(".p2").slideToggle("slow");
});
</script>
</body>
</html>
E ho adattato questo codice qua,in modo che all'inizio venga visualizzato il form diregistrazione e poi quello di accesso
<!DOCTYPE html lang="IT"><head>
<style>
#div1 {
display: none;
}
</style>
<script>
$(".button").click(function () {
$(".div1").slideToggle("slow");
$(".div2").slideToggle("slow");
});
</script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="javascript/effettihome.js"></script>
<link rel="stylesheet" href="css/bottoni.css">
<link rel="stylesheet" href="css/stylehome.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<title>Plofer</title>
<style>@import url(http://fonts.googleapis.com/css?family=Amaranth:700);</style>
</head>
<body leftmargin="0" topmargin="0" background="grattacielo.jpg">
<table border="0" width="100%" background="immagini/sfondo.jpg">
<tr>
<td>
<div align="left">
<font face="Amaranth" size="5" color="white">Plofer</font>
</div>
</td>
</tr>
</table>
<button>toggle</button>
<br><br><div align="center">
<table border="0" height="15%"><tr><td><div align="center" style="font: 30px AMaranth;color: white; text-shadow: 0px 2px 3px
#555; opacity: 0.9;">
<b>Condividi<font size="5"> le foto con i tuoi amici<br>e rendi quel momento un esperienza <font
size="6">indimenticabile</b></font></div></td></tr></table></div>
<div id="div1" class="div1"><form action="login" method="POST"><table border="0" height="80%" width="100%">
<tr><td><div id="box1" align="center"><input class="input2" type="text" name="email" placeholder="Email" autocomplete="off"
><br><input class="input2" type="password" name="password" placeholder="Password" autocomplete="off"><br><br><input
type="submit" value="Accedi" class="button"><br></div></td></tr></table></form></div>
<div class="div2"><form action="signup.php" method="POST"><input type="hidden" name="attempt" value="0"><table border="0"
height="80%" width="100%"><tr><td><div id="box1" align="center"><input class="input2" type="text" name="nome"
placeholder="Nome" autocomplete="off" ><br><input class="input2" type="text" name="cognome" placeholder="Cognome"
autocomplete="off" ><br><input class="input2" type="email" name="email" placeholder="Email" autocomplete="off"><br><input
class="input4" type="password" name="password" placeholder="Password" autocomplete="off"><br><br><input type="submit"
value="Prossimo passo" class="button"><br></div></td></tr></table></form></div>
<table border="0" width="100%" background="sfondo47.png" height="35%"><tr><td><img src="share.png" width="100"
height="100"></td><td><div align="center" style="color: #222; text-shadow: 0px 2px 3px #555;font: 40px Tahoma, Helvetica,
Arial, Sans-Serif;">Metti le tue foto in un unico grande spazio.</div></td><td>
<div align="right"><img src="plixrlf.png" width="150" height="150"></div></td></tr></table><br><br><br><br>
<table border="1" width="100%" bgcolor="#474747" frame="above" style="opacity: 0.8;">
<tr>
<td style="border: 0px;"><p align="center">
<a href="#" class="link"><b>INFORMAZIONI</a>   <a href="#" class="link">PRIVACY</a>   <a href="#"
class="link">ASSISTENZA</b></a></p></td></tr></table>
</body></html>
Cosa non va?
Il problema è che non succede niente,invece i form dovrebbero alternarsi quando si clicca su "toggle" (il bottone)
