Neha Purwar Neha Purwar - 1 year ago 60
Javascript Question

hides the rest of div and show a new div after clicking in anchor tag

I have created two three div and i wants that when i click on the tab ,rest of two div should be hidden and third should be shown.And i am trying to do this but i didn't get any success till now.

Please help me through this.

Three divs are like this---

First div

<div id="div1">
<div style="text-align:center;padding:10px;">New to Register?</div>
<table align="center">
<tr>
<td><input type="email" name="email" placeholder="Email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" title="example@example.com" >
</td>
</tr>
<tr>
<td><input type="password" name="password" placeholder="Password" required></td>
</tr>
<tr>
<td><input type="password" name="password" placeholder="Confirm Password" required></td>
</tr>
<tr>
<td>
<button style="height:32px; border-radius:2px; border:none; color:white; width:100%; margin-bottom: 12px; background-color:rgb(255, 201, 73)" name="submit" id="submit"> LOG IN </button>
</td>

</tr>
</table>
</div>


Second div---

<div id="div2">
<div style="text-align:center;padding:10px;">Log In</div>
<table align="center">
<tr>
<td><input type="text" name="email" placeholder="Email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" title="example@example.com" ></td>
</tr>

<tr>
<td><input type="password" name="password" placeholder="Password" required></td>
</tr>

<tr>
<td colspan="2" align="center">
<div class="left">
<label><input class="classforcheckbox" type="checkbox" />&nbsp;Keep me logged in</label>
</div>

<div class="right" ><a>Forgot Password?</a></div>
</td>
</tr>

<tr>
<td>
<button style="height:32px; border-radius:2px;margin-bottom: 10px; border:none; color:white; width:100%; background-color:rgb(255, 201, 73);" name="submit" id="submit"> LOG IN </button>
</td>
</tr>
</table>
</div>


Third div---

<div id="div3">
<div style="text-align: center;padding: 10px">Forgot Password</div>
<div style="text-align: center;padding: 10px">Enter your email below and we'll send you an email with instruction on how to re-new your password.</div>
<table align="center">
<tr>
<td>
<input type="text" name="email" placeholder="Email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" title="example@example.com">
</td>
</tr>
<tr>
<td>
<button style="height: 32px;border-radius: 2px;margin-bottom: 10px;border: none;color: white;width: 100%;background-color: rgb(255, 201, 73);" name="submit" id="submit">Send Email</button>
</td>
</tr>
</table>
</div>


I wants that div1, div2 should be hidden when i click on forget password and then div3 should be shown.
Any help will be appreciated.

Answer Source

Try this code. Of course, it could be further modified and simplified, but it's a good starting point.

function checkRegister(selectedType){
  if (selectedType == 'register'){
    document.getElementById('div1').style.display = 'block';
    document.getElementById('div2').style.display = 'none';
	document.getElementById('div3').style.display = 'none'; 
  
 } else if (selectedType == 'forgot'){
    document.getElementById('div1').style.display = 'none';
    document.getElementById('div2').style.display = 'none';
	document.getElementById('div3').style.display = 'block';
	
} else if (selectedType == 'login'){
	document.getElementById('div1').style.display = 'none';
    document.getElementById('div2').style.display = 'block';
	document.getElementById('div3').style.display = 'none';

}  else {
	document.getElementById('div1').style.display = 'none';
    document.getElementById('div2').style.display = 'block';
	document.getElementById('div3').style.display = 'none';

}
}
.my_button {
  height: 32px;
  border-radius: 2px;
  margin-bottom: 10px;
  border: none;
  color: white;
  width: 150px;
  background-color: rgb(255, 201, 73);
}
<div id="div1">
	<div style="text-align:center;padding:10px;"> 
      Register
    </div>
	<table align="center">
		<tr>
			<td><input type="email" name="email" placeholder="Email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" title="example@example.com" >
			</td>
		</tr>
		<tr>
			<td><input type="password" name="password" placeholder="Password" required></td>
		</tr>
		<tr>
			<td><input type="password" name="password"  placeholder="Confirm Password" required></td>
		</tr>       
		<tr>
			<td>
				<button class="my_button" name="submit" id="submit"> LOG IN </button>
			</td>

		</tr>
	</table>
</div>

<div id="div2" style="display: none;">
	<div style="text-align:center;padding:10px;">Log In</div>
		<table align="center">
			<tr>
				<td><input type="text" name="email" placeholder="Email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" title="example@example.com" ></td>
			</tr>

			<tr>
				<td><input type="password" name="password" placeholder="Password" required></td>
			</tr>

			<tr>
				<td colspan="2" align="center">
					<div class="left">
						<label><input class="classforcheckbox" type="checkbox"  />&nbsp;Keep me logged in</label>
					</div>

				</td>	
			</tr>

			<tr>
				<td>
					<button class="my_button" name="submit" id="submit"> LOG IN </button>
				</td>
			</tr>
		</table>
</div>
 <div id="div3"  style="display: none;">
	<div style="text-align: center;padding: 10px"> Forgot Password</div>
		<div style="text-align: center;padding: 10px">Enter your email below and we'll send you an email with instruction on how to re-new your password.</div>
		<table align="center">
			<tr>
				<td>
					<input type="text" name="email" placeholder="Email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" title="example@example.com">
				</td>
			</tr>
			<tr>
				<td>
					<button class="my_button" name="submit" id="submit">Send Email</button>
				</td>
			</tr>
		</table>
		
</div>

<div style="text-align:center;padding:10px;">  
   <button class="my_button" type="button" value="register" onclick="checkRegister(this.value)" >Register</button> 
   <button class="my_button" type="button" value="forgot"   onclick="checkRegister(this.value)">Forgot Password</button>
   <button class="my_button" type="button" value="login" onclick="checkRegister(this.value)">Login</button> 			
</div>