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

Question

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 1

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>

Answer 2

You can simply create function with jQuery like

$("#div3").click(function(){ 
    $("#div1").hide();
    $("#div2").hide();  
});

Or using pure javascript

<div id="div3" onclick="hideOtherDivs()">Div3</div>
<script>
function hideOtherDivs()
{
  document.getElementById("div1").style.display = "none";
  document.getElementById("div2").style.display = "none";
}
</script>