I have been working on a login and signup form that initially only asks for the username and password. Once the user clicks on the sign-in button, additional inputs such as first name, last name, date of birth, etc. should be displayed. I attempted to write code to achieve this functionality, but unfortunately, it is not working as expected.
#form{
width: 300px;
margin: 40px auto;
display: flex;
flex-direction: column;
justify-content: center;
border: 3px solid rgb(6, 61, 30);
padding: 20px;
border-radius: 30px;
background-color: #e4e1ff;
}
.butts{
display: flex;
justify-content: center;
position: relative;
}
#form .butt{
width: 150px;
height: 50px;
font-size: 25px;
display: inline-block;
background-color: #e4e1ff;
border: none;
}
hr{
height: 4px;
width: 150px;
margin: 0;
background: tomato;
border: none;
transition: 0.2s ease-in-out;
position: absolute;
left: 0px;
bottom: 0px;
}
#butt1:focus ~ hr{
left: 0;
}
#butt2:focus ~ hr{
left: 50%;
}
#login_form{
margin-top: 20px;
}
#login_form input{
width: 300px;
height: 50px;
font-size: 20px;
margin-bottom: 10px;
border-radius: 20px;
}
#signup_form{
display: none;
}
#butt2:focus ~ #signup_form{
display: block;
}
#butt2:focus ~ #login_form{
display: none;
}<section id="form">
<div class="butts">
<button class="butt" id="butt1">Login</button>
<button class="butt" id="butt2">Sign Up</button>
<hr>
</div>
<div id="login_form">
<input type="text" placeholder="username">
<input type="password" placeholder="password">
</div>
<div id="signup_form">
<input type="text" placeholder="First Name">
<input type="text" placeholder="Last Name">
<input type='date' placeholder="Birthdate">
<input type='text' placeholder="username">
<input type="password" placeholder="password">
<input type="password" placeholder="confirm password">
<button>Connect Github</button>
<button>Create Account</button>
</div>
</section>