World of Education Global Organization
View MCQ Questions in Both or English || Hindi Language

How to Hide and Show Forms on click using JavaScript

3 years ago | 3 years ago | admin
How to Hide and Show Forms on click using JavaScript How to Hide and Show Forms on click using JavaScript
Create Index.html and paste this to the body of the index page.
<button id="form1show">Show form 1</button>
<button id="form2show">Show form 2</button>
<button id="form3show">Show form 3</button>
<button id="hideall">Hide All</button>
<div id="form1">
  <div class="formhead">Form 1</div>
 <form>
   <div class="formdata"><input class="width100" placeholder="username"></input></div>
  </form>
</div>

<div id="form2">
  <div class="formhead">Form 2</div>
 <form>
   <div class="formdata"><input class="width100" placeholder="username"></input></div>
  </form>
</div>


<div id="form3">
  <div class="formhead">Form 3</div>
 <form>
   <div class="formdata"><input class="width100" placeholder="username"></input></div>
  </form>
</div>
In style section use this
body {
  background-color: #a3d5d3;
}
.width100{
  width:95%;
  padding:5px;
}
#form1{
  width:310px;
  padding:10px;
  display:none;
}
#form2{
  width:310px;
  padding:10px;
  display:none;
}
#form3{
  width:310px;
  padding:10px;
  display:none;
}
.formhead{
  background-color: #27A3D5;
  color: #fff;
  text-align:center;
   width:310px;
  padding:10px;
}
.formdata{
  background-color: #107FAC;
  width:310px;
  padding:10px;
}
In Javascript Section paste this 
	$("#form1show").click(function(e){
	$('#form1').show();
    $('#form2').hide();
    $('#form3').hide();
	});

	$('#form2show').click(function(e){
	$('#form2').show();
    $('#form1').hide();
    $('#form3').hide();
	});

$('#form3show').click(function(e){
	$('#form3').show();
    $('#form1').hide();
    $('#form2').hide();
	});


$('#hideall').click(function(e){
	$('#form3').hide();
    $('#form1').hide();
    $('#form2').hide();
	});

See the Pen XVYKZE by Wedugo (@wedugo) on CodePen.

Recommended
Please Like and Share...