CODEWITHSUNDEEP
javascripthtmlcss
jrob11
jrob11

Reputation: 315

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

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

Upvotes: 2

Views: 75

Answers (3)

Sohail Ashraf
Sohail Ashraf

Reputation: 10604

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>

Upvotes: 2

Umair Khan
Umair Khan

Reputation: 1752

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>

Upvotes: 1

Manjuboyz
Manjuboyz

Reputation: 7066

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>

Upvotes: 1

Related Questions