This tutorial focused on creating a registration form that can be hide and display on a click. This hide and show functionality will be maintained using jQuery.



Here with the help of HTML login and registration form example shown below you will learn how to perform it.

So, suppose you have a sign up form and login form on your website, you can display them very effectively. When you click on a “Login form” hyperlink, login form will display.

 

jquery hide and show sign up

And, simultaneously, when you click on a sign up form hyperlink, “Sign up” form will appear.

jquery show and hide

It’s a complete Login/Signup pannel.

Here is the jQuery/HTML codes to Show/Hide form (Sign in & Sign up).

HTML File: showhideform.html

  • It includes div “first” for the Login form.
  • Div “second” for the Signup form.

<!DOCTYPE html>
<html>
<head>
<title>Show & Hide Form - Demo Preview</title>
<meta content="noindex, nofollow" name="robots">
<link href="css/showhide.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/showhide.js"></script>
</head>
<body>
<img id="logo" src="images/logo.png">
<div id="main">
<!-- Create Div First For Login Form -->
<div id="first">
<form action="" method="post">
<h3>Login to your FormGet account.</h3>
<img id="divider" src="images/divider.png">
<input id="loginemail" placeholder="Email" type="text">
<input id="loginpassword" placeholder="Password" type="password">
<input id="login" type="button" value="Sign In">
<p id="one"><a href="#">Forgot Password ?</a></p>
<p id="two">Don't have account? <a class="signup" href="#" id="signup">Sign up here</a></p>
</form>
</div>
<!-- Create Div Second For Signup Form-->
<div id="second">
<form action="" id="form" method="post" name="form">
<h3>Create a Free Account</h3>
<img id="divider" src="images/divider.png">
<input id="name" placeholder="Full Name" type="text">
<input id="registeremail" placeholder="Email" type="text">
<input id="registerpassword" placeholder="Password" type="password">
<input id="contact" placeholder="Contact Number" type="text">
<input id="register" type="button" value="Create your FormGet account">
<p id="two">Already have an account? <a class="signin" href="#" id="signin">Sign in</a></p>
</form>
</div>
</div>
</body>
</html>

jQuery File: showhide.js

  • Contains jQuery function to display sign-up form, hide login form when clicking on a hyperlink.
  •  jQuery function to display login form, hide sign-up form when clicking on a hyperlink.

$(document).ready(function() {
// On Click SignIn Button Checks For Valid E-mail And All Field Should Be Filled
$("#login").click(function() {
var email = new RegExp(/^[+a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,4}$/i);
if ($("#loginemail").val() == '' || $("#loginpassword").val() == '') {
alert("Please fill all fields...!!!!!!");
} else if (!($("#loginemail").val()).match(email)) {
alert("Please enter valid Email...!!!!!!");
} else {
alert("You have successfully Logged in...!!!!!!");
$("form")[0].reset();
}
});
$("#register").click(function() {
var email = new RegExp(/^[+a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,4}$/i);
if ($("#name").val() == '' || $("#registeremail").val() == '' || $("#registerpassword").val() == '' || $("#contact").val() == '') {
alert("Please fill all fields...!!!!!!");
} else if (!($("#registeremail").val()).match(email)) {
alert("Please enter valid Email...!!!!!!");
} else {
alert("You have successfully Sign Up, Now you can login...!!!!!!");
$("#form")[0].reset();
$("#second").slideUp("slow", function() {
$("#first").slideDown("slow");
});
}
});
// On Click SignUp It Will Hide Login Form and Display Registration Form
$("#signup").click(function() {
$("#first").slideUp("slow", function() {
$("#second").slideDown("slow");
});
});
// On Click SignIn It Will Hide Registration Form and Display Login Form
$("#signin").click(function() {
$("#second").slideUp("slow", function() {
$("#first").slideDown("slow");
});
});
});

CSS File: showhide.css

  • Styling sign-in, sign-up panel.

body{
background-color:#eeeff3;
text-align:center
}
#main{
position:relative;
margin-top:15px
}
img#logo{
margin-top:50px
}
#first{
width:308px;
margin-top:0;
padding:28px 25px;
background-color:#fff;
border:1px solid #000;
border-radius:5;
position:absolute;
left:50%;
margin-left:-180px;
top:0
}
#second{
width:308px;
margin-top:0;
padding:28px 25px;
background-color:#fff;
display:none;
border:1px solid #000;
border-radius:5;
position:absolute;
left:50%;
margin-left:-180px;
top:0
}
h3{
margin-top:0
}
input[type=text],[type=password]{
padding:7px;
width:100%;
height:40px;
margin-top:15px;
font-size:18px
}
input[type=button]{
background:linear-gradient(to bottom,#22abe9 5%,#36caf0 100%);
box-shadow:inset 0 1px 0 0 #7bdcf4;
border:1px solid #0F799E;
color:#fff;
width:306px;
height:40px;
margin-top:15px;
font-size:18px;
font-weight:700;
cursor:pointer;
text-shadow:0 1px 0 #13506D
}
input[type=button]:hover{
background:linear-gradient(to bottom,#36caf0 5%,#22abe9 100%)
}
a{
text-decoration:none;
color:#6495ed
}
p#two{
margin-bottom:0
}

Pabbly Form Builder


Conclusion:

So, if you want to create a complete sign-in, sign-up panel for any of your project, the above codes jQuery/HTML codes will  provide you a great help.

Collect more related information through these blogs –