Onclick or eventListener('click') isn't invoking the function as intended

Question

I'm working on a login form for my page that will have 2 options "login" and "signup". Similar concept to mini tabs and iframe windows. Basically There is a div for "login" and a div for "signup" side by side. When you click "login" I want a div (currently set for height: 0 and overflow: hidden ) to 'expand' ( height: auto; overflow: visible ) when you click "login" (login is a DIV not a submit button, it's like a tab).

I do not understand why it is not invoking the function. During my troubleshooting, I replaced the function with another function in my page that I know is 100% working, but still nothing happens.

I included codes of everything I have tried, I did not use the onClick in the HTML tag at the same time as the addEventListener('click') . I just included both so the codes are available. Likewise, in the Javascript, I did not do both add class and set height. I tried them independently.

My preferred method is using eventlistener and add class (which should allow the transition effect to work).

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)
}

Answer 1

You have issue with the CSS . you are assigning the overflow: visible; property with id selector which has higher precedence than class .

.expand class will never overwrite this property, hence the overflow property will always remain hidden . You could use !important in the css property to force the browser to use this.

You could handle this by adding the visible property using javascript . or use the class selector to apply the css.

Example with Javascript:

 document.addEventListener('DOMContentLoaded', function() { document.getElementById('login-title').addEventListener('click', loginExpand); }); function loginExpand() { console.log("clicked"); let elem = document.getElementById('login-content'); elem.style.height = 500; //tried this elem.style.overflow = 'visible'; elem.classList.add('expand'); //also tried this (separately, not together) }

 /* 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; }

 <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> </li> </ul> </div>

Example with Class selector:

 document.addEventListener('DOMContentLoaded', function() { document.getElementById('login-title').addEventListener('click', loginExpand); }); function loginExpand() { let elem = document.querySelector('.login-content'); elem.classList.add('expand'); //also tried this (separately, not together) }

 /* default state with 0 height, ideally with a.5s transition 0 height to auto */.login-content { height: 0; transition: all 3s; overflow: hidden; } /* class to be added to div */.expand { height: 500px; overflow: visible; background-color: burlywood; } /* link-like features to div */.drop-down-head:hover { background: #8fffad; cursor: pointer; }

 <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 class="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> </li> </ul> </div>

Answer 2

Try this, I used display than using overflow :

 document.addEventListener('DOMContentLoaded', function() { document.getElementById('login-title').addEventListener('click', loginExpand); }); function loginExpand() { document.getElementById('login-content').style.display = 'block'; }

 #login-content, #signup-content { height: 0; transition: height.5s; -moz-transition: height.5s; -webkit-transition: height.5s; -o-transition: height.5s; } /* class to be added to div */.expand { height: auto; overflow: visible; } /* link-like features to div */.drop-down-head:hover { background: #8fffad; cursor: pointer; }

 <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" style=" display:none;"> <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>

Answer 3

I had added just !important to .expand in CSS and its working fine.

 document.addEventListener('DOMContentLoaded', function() { document.getElementById('login-title').addEventListener('click', loginExpand); }); function loginExpand() { document.getElementById('login-content').classList.add('expand'); }

 /* 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;important: overflow; visible.important: } /* link-like features to div */:drop-down-head;hover { background: #8fffad; cursor: pointer; }

 <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>