Hoe kan ik in JS een script schrijven die checkt of een div (h2) is geklikt en zodra het checken of de onderstaande div (.formDiv) wel of niet weergegeven is. Daarna wil ik als ik een van de h2's heb geklikt dat die andere h2's verborgen worden zeg maar
[JS]
$(".formDiv").hide();
$(".h2").click(function() {
$(".formDiv").slideToggle(250);
});
$(".formDiv1").hide();
$(".h2-1").click(function() {
$(".formDiv1").slideToggle(500);
});
$(".formDiv2").hide();
$(".h2-2").click(function() {
$(".formDiv2").slideToggle(500);
});
});
$("#form .h2").click(function() {
var $this = $(this);
if($this.data('clicked')){
func(".formDiv").show();
}else{
$(".formDiv").hide();
};
});[/JS]
Alvast bedankt
Code:
<form action="form_submit" method="post" accept-charset="utf-8" id="form">
<h2 class="h2">Login/Logout</h2>
<div class="formDiv">
<input type="text" name="Username" placeholder="Gebruikersnaam"><br>
<input type="password" name="PasswordUsername" placeholder="Wachtwoord"><br>
<input type="button" name="Login" value="Login">
<p>Wachtwoord vergeten?<a href="#"> klik hier</a></p>
<p>Gebruikersnaam vergeten?<a href="#"> typ hieronder je emailadres:</a></p>
<input type="email" name="" value="ForgotenPSmail" placeholder="wat is jouw emailadres?">
</div>
<hr>
<h2 class="h2-1">Geen account? Maak er een nieuwe.</h2>
<div class="formDiv1">
<input type="text" name="Fullname" placeholder="Jouw naam"><br>
<input type="text" name="NewUsername" placeholder="Jouw Gebruikersnaam"><br>
<input type="password" name="NewPassword" placeholder="Jouw Wachtwoord"><br>
<input type="text" name="NewEmailAdres" placeholder="Jouw emailadres"><br>
<label>Geslacht</label>
<br>
<input type="radio" name="man" value="man"><label>Man</label><br>
<input type="radio" name="man" value="man"><label>Vrouw</label><br>
<input type="button" name="CreateNewAccount" value="Maak">
</div>
<hr>
<h2 class="h2-2">Of login met je <b>social media</b> account:</h2>
<div class="formDiv2">
<ul class="socialBox">
<li><i class="fa fa-facebook fa-2x"></i></li>
<li><i class="fa fa-twitter fa-2x"></i></li>
<li><i class="fa fa-google-plus fa-2x"></i></li>
<li><i class="fa fa-vimeo-square fa-2x"></i></li>
</ul>
</div>
</form>[JS]
$(".formDiv").hide();
$(".h2").click(function() {
$(".formDiv").slideToggle(250);
});
$(".formDiv1").hide();
$(".h2-1").click(function() {
$(".formDiv1").slideToggle(500);
});
$(".formDiv2").hide();
$(".h2-2").click(function() {
$(".formDiv2").slideToggle(500);
});
});
$("#form .h2").click(function() {
var $this = $(this);
if($this.data('clicked')){
func(".formDiv").show();
}else{
$(".formDiv").hide();
};
});[/JS]
Alvast bedankt
Laatst bewerkt:
