CODEWITHSUNDEEP
csstoggleclass
Alvaro Bascunan
Alvaro Bascunan

Reputation: 81

jQuery classList.toggle not working properly

I'm new to javascript and i'm trying to get 2 functions to work when click on a button; first function is to transform the menu button to an "X" (typical 3 lines menu icon)

the second function is, TranslateX the #mobileMenu so it enters the screen from the left.

The first function works great, but the translate for the menu is not doing anything, i check the developers tools and the class is being applied but the menu is not translating.

The Code.

HTML

<div id="mobileNavContainer">
    <a class="mobileNavLogo" href=""><img src="assets/img/Logo40x40.png" alt=""/></a>
    <div id="mobile_button">
       <div class="mobile_button_lines1"></div>
       <div class="mobile_button_lines2"></div>
       <div class="mobile_button_lines3"></div>
    </div>
    <div id="mobileMenu">
       <ul id="mobileLinks">
          <li><a href="">WEB</a></li>
          <li><a href="">GRAFICO</a></li>
          <li><a href="">FOTOGRAFIA</a></li>
          <li><a href="">PORTAFOLIO</a></li>
          <li><a href="">NOSOTROS</a></li>
          <li><a href="">CONTACTO</a></li>
       </ul>
       <ul id="mobileSocialIcons">
          <li><a href=""><img src="assets/img/nav-facebook-icon.png" alt=""/></a></li>
          <li><a href=""><img src="assets/img/nav-twitter-icon.png" alt=""/></a></li>
          <li><a href=""><img src="assets/img/nav-instagram-icon.png" alt=""/></a></li>
       </ul>
    </div>
</div>

CSS

#mobileMenu{
  display: block;
  position: relative;
  background-color: rgb(230, 231, 232);
  width: 170px;
  transition: all 0.3s ease-in-out;
  transform: translateX(-100%);
}

.showMenu #mobileMenu{
  display: block;
  transform: translateX(0);
}

#mobile_button{
  position: fixed;
  display: block;
  width: 50px;
  height: 60px;
  float: right;
  right: 5px;
  cursor: pointer;
  z-index: 1;
}

.mobile_button_lines1{
  max-width: 70%;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  -ms-grid-row-align: center;
  align-items: center;
  height: 2px;
  background-color: rgb(88, 88, 91);
  margin-top: 18px;
  border-radius: 2px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.mobile_button_lines2, .mobile_button_lines3{
  max-width: 70%;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  -ms-grid-row-align: center;
  align-items: center;
  height: 2px;
  background-color: rgb(88, 88, 91);
  margin-top: 9px;
  border-radius: 2px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.show .mobile_button_lines1 {
  -webkit-transform: rotate(45deg) translate(11px, 5px);
  transform: rotate(45deg) translate(11px, 5px);
}

.show .mobile_button_lines2 {
  opacity: 0;
}

.show .mobile_button_lines3 {
  -webkit-transform: rotate(-45deg) translate(10px, -5px);
  transform: rotate(-45deg) translate(10px, -5px);
}

JS

var mobileButtonTransform = document.getElementById('mobile_button');
mobileButtonTransform.addEventListener('click',function(){
  mobileButtonTransform.classList.toggle('show');
})

var mobileMenuShow = document.getElementById('mobileMenu');
mobileButtonTransform.addEventListener('click',function(){
  mobileMenuShow.classList.toggle('showMenu');
})

I don't know why the translateX is not working on click, the first function works perfect and on the developers tools of Chrome i can see .showMenu is being applied to #mobileMenu, but nothing happens,i get no error on the console.

Upvotes: 1

Views: 389

Answers (1)

zer00ne
zer00ne

Reputation: 43910

You need to change the following:

.showMenu #mobileMenu {
  display: block;
  transform: translateX(0);
 }

to:

 #mobileMenu.showMenu {
  display: block;
  transform: translateX(0);
}

As you said, the JavaScript is functioning properly and there were no errors is true. The reason why it wasn't functioning properly is because you didn't have the proper selector for this:

mobileMenuShow.classList.toggle('showMenu');

SNIPPET

I changed all of the names because the original ones were to hard to follow.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
#mobList{
  display: block;
  position: relative;
  background-color: rgb(230, 231, 232);
  width: 170px;
  transition: all 0.3s ease-in-out;
  transform: translateX(-100%);
}

#mobList.listOn {
  display: block;
  transform: translateX(0);
}

#mobBtn{
  position: fixed;
  display: block;
  width: 50px;
  height: 60px;
  float: right;
  right: 5px;
  cursor: pointer;
  z-index: 1;
}

.mobBtnL1{
  max-width: 70%;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  -ms-grid-row-align: center;
  align-items: center;
  height: 2px;
  background-color: rgb(88, 88, 91);
  margin-top: 18px;
  border-radius: 2px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.mobBtnL2, .mobBtnL3{
  max-width: 70%;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  -ms-grid-row-align: center;
  align-items: center;
  height: 2px;
  background-color: rgb(88, 88, 91);
  margin-top: 9px;
  border-radius: 2px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.btnOn .mobBtnL1 {
  -webkit-transform: rotate(45deg) translate(11px, 5px);
  transform: rotate(45deg) translate(11px, 5px);
}

.btnOn .mobBtnL2 {
  opacity: 0;
}

.btnOn .mobBtnL3 {
  -webkit-transform: rotate(-45deg) translate(10px, -5px);
  transform: rotate(-45deg) translate(10px, -5px);
}
</style>
</head>

<body>
<div id="mobNavBox">
    <a class="mobNavLogo" href=""><img src="assets/img/Logo40x40.png" alt=""/></a>
    <div id="mobBtn">
       <div class="mobBtnL1"></div>
       <div class="mobBtnL2"></div>
       <div class="mobBtnL3"></div>
    </div>
    <div id="mobList">
       <ul id="mobLnx">
          <li><a href="">WEB</a></li>
          <li><a href="">GRAFICO</a></li>
          <li><a href="">FOTOGRAFIA</a></li>
          <li><a href="">PORTAFOLIO</a></li>
          <li><a href="">NOSOTROS</a></li>
          <li><a href="">CONTACTO</a></li>
       </ul>
       <ul id="mobSocIco">
          <li><a href=""><img src="assets/img/nav-facebook-icon.png" alt=""/></a></li>
          <li><a href=""><img src="assets/img/nav-twitter-icon.png" alt=""/></a></li>
          <li><a href=""><img src="assets/img/nav-instagram-icon.png" alt=""/></a></li>
       </ul>
    </div>
</div>
<script>
var mobBtnTran = document.getElementById('mobBtn');
mobBtnTran.addEventListener('click',function(){
  mobBtnTran.classList.toggle('btnOn');
})

var mobListbtnOn = document.getElementById('mobList');
mobBtnTran.addEventListener('click',function(){
  mobListbtnOn.classList.toggle('listOn');
})
</script>
</body>
</html>

Upvotes: 2

Related Questions