Neha Purwar Neha Purwar - 7 months ago 7
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

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>