I'm in the process of developing a login form for my website that will offer 2 options - "login" and "signup". The concept is similar to mini tabs and iframe windows. Essentially, I have two divs side by side for "login" and "signup". When the user clicks on "login", I want a hidden div (currently set with height: 0 and overflow: hidden) to expand (height: auto; overflow: visible). It's important to note that "login" acts like a tab, not a submit button.
I'm facing an issue where the function is not being triggered as intended. Despite my troubleshooting efforts, even replacing it with a known working function did not yield any results.
I have shared all the code variations I attempted. In the HTML, I refrained from using both onClick within the tag simultaneously with addEventListener('click'). Similarly, in the JavaScript, I tried adding a class and setting the height separately.
My preference lies in utilizing event listeners combined with adding classes, which should enable the transition effect to function properly.
HTML:
<div id="login-box">
<span class="login-head">
<h5 align="center" class="head">Login</h5><hr />
</span>
<ul class="drop-down">
<li>
<!-- LOGIN and SIGNUP tabs -->
<div id="login-title" class="drop-down-head" onClick="loginExpand()">LOGIN</div>
<div id="signup-title" class="drop-down-head" onClick="signupExpand()">SIGNUP</div>
<!-- login content to be expanded from 0 height to auto when "login div" above is clicked -->
<div id="login-content">
<div class="input column" id="first-name">
<input placeholder="First Name" type="text" class="validate white">
<div id="first-name-tooltip" class="tooltip">First Name</div>
</div>
CSS:
/* default state with 0 height, ideally with a .5s transition 0 height to auto */
#login-content, #signup-content {
height: 0;
transition: height .5s;
-moz-transition: height .5s;
-webkit-transition: height .5s;
-o-transition: height .5s;
overflow: hidden;
}
/* class to be added to div */
.expand {
height: auto;
overflow: visible;
}
/* link-like features to div */
.drop-down-head:hover {
background: #8fffad;
cursor: pointer;
}
Javascript:
document.addEventListener('DOMContentLoaded',function() {
document.getElementById('login-title').addEventListener('click',loginExpand);
});
function loginExpand() {
document.getElementById('login-content').style.height=500; //tried this
document.getElementById('login-content').classList.add('expand'); //also tried this (separately, not together)
}