Toggle button is not working in Javascript

Question

I have created a Navigation bar and that contain Toggle Button .The problem I am facing is in the responsive view, after clicking on the toggle button ,the toggle button hides and shows the navigation bar. But after hiding the toggle button I want to show another button upon which clicking the navigation bar hides. I don't understand what I'm doing wrong and what should I do?

Here is The code is:

let menuBar=document.querySelector('#menu-bar');
navBar=document.querySelector('.navbar');


    menuBar.onclick=()=>{
        menuBar.classList.add('hide');
       // menuBar.classList.add('fa-times');
        navBar.classList.add('show');
        times();
    }

    let icon="fas fa-times";
    function times(){
        if(navBar.classList.contains('show')){
            menuBar.innerHTML=`<i class="${icon}"></i>`;
        }
    }

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html{
    font-size: 62.5%;
}
header{
    top: 0;
    left: 0;
    position: fixed;
    background: #fff;
    box-shadow:5px 5px 7px rgba(0,0,0,0.4);
    width: 100%;
    padding: 1.5rem 10%;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
 header h1{
    font-size: 30px;
    color: rgb(225, 156, 65);
    text-transform: capitalize;
}
header .navbar ul{
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
}
header .navbar ul li{
    margin-right: 3rem;
}
header .navbar ul li a{
    text-decoration: none;
    font-size: 1.3rem;
    color: #568aef;
    text-transform: capitalize;
}
#menu-bar{
    font-size: 20px;
    cursor: pointer;
    display:none;
}
/*media query*/
@media (max-width:768px){
    html{
        font-size: 55%;
    }
    header #menu-bar{
        display: block;
    }
    header #menu-bar.hide{
        opacity: 0;
        pointer-events: none;
    }
    header .navbar{
        position: fixed;
        top: 8rem;
        left: 0;
        background: #568aef;
        width: 100%;
        opacity: 0;
    }
    header .navbar.show{
        opacity: 1;
    }
    header .navbar ul{
        flex-flow: column;
        padding: 2rem;
    }
    header .navbar ul li{
        width: 100%;
        margin: 1.5rem;
    }
    header .navbar ul li a{
        color: #fff;
        display: block;
        padding-left: 2rem;
        font-size: 2rem;
        border-left: 0.3rem solid #fff;
    }
   
    .fa-times{
        transform: rotate(180deg);
        opacity: 1;
        font-size: 20px;
        color: black;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nav4</title>
    <!--fontawsome cdn link-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    
    <link rel="stylesheet" href="css/nav4.css">
</head>
<body>
    <header>
        <h1>ninja codes</h1>
        <div id="menu-bar" class="fas fa-hamburger"></div>
        
        <nav class="navbar">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">about</a></li>
            <li><a href="#">services</a></li>
            <li><a href="#">contact</a></li>
            <li><a href="#">login</a></li>
        </ul>
    </nav>
</header>
<!--jquery cdn link-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!--custom js file link-->
<script src="nav4.js"></script>
</body>
</html>

Spectric · Accepted Answer · 2021-06-15 15:36:12Z

Some notes:

It was not working previously because you did not remove the hide class after adding it to menuBar
You are nesting an icon in an icon - not recommended
You are performing unnecessary checks - you should just use classList.toggle() instead

Here's the working code:

let menuBar = document.querySelector('#menu-bar');
navBar = document.querySelector('.navbar');


menuBar.onclick = () => {
  navBar.classList.toggle('hide');
  navBar.classList.toggle('show');
  times();
}

let icon = "fas fa-times";

function times() {
  menuBar.classList.toggle('fa-times');
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

header {
  top: 0;
  left: 0;
  position: fixed;
  background: #fff;
  box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.4);
  width: 100%;
  padding: 1.5rem 10%;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header h1 {
  font-size: 30px;
  color: rgb(225, 156, 65);
  text-transform: capitalize;
}

header .navbar ul {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
}

header .navbar ul li {
  margin-right: 3rem;
}

header .navbar ul li a {
  text-decoration: none;
  font-size: 1.3rem;
  color: #568aef;
  text-transform: capitalize;
}

#menu-bar {
  font-size: 20px;
  cursor: pointer;
  display: none;
}


/*media query*/

@media (max-width:768px) {
  html {
    font-size: 55%;
  }
  header #menu-bar {
    display: block;
  }
  header #menu-bar.hide {
    opacity: 0;
    pointer-events: none;
  }
  header .navbar {
    position: fixed;
    top: 8rem;
    left: 0;
    background: #568aef;
    width: 100%;
    opacity: 0;
  }
  header .navbar.show {
    opacity: 1;
  }
  header .navbar ul {
    flex-flow: column;
    padding: 2rem;
  }
  header .navbar ul li {
    width: 100%;
    margin: 1.5rem;
  }
  header .navbar ul li a {
    color: #fff;
    display: block;
    padding-left: 2rem;
    font-size: 2rem;
    border-left: 0.3rem solid #fff;
  }
  .fa-times {
    transform: rotate(180deg);
    opacity: 1;
    font-size: 20px;
    color: black;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Nav4</title>
  <!--fontawsome cdn link-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

  <link rel="stylesheet" href="css/nav4.css">
</head>

<body>
  <header>
    <h1>ninja codes</h1>
    <div id="menu-bar" class="fas fa-hamburger"></div>

    <nav class="navbar hide">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">about</a></li>
        <li><a href="#">services</a></li>
        <li><a href="#">contact</a></li>
        <li><a href="#">login</a></li>
      </ul>
    </nav>
  </header>
  <!--jquery cdn link-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <!--custom js file link-->
  <script src="nav4.js"></script>
</body>

</html>

Collectives™ on Stack Overflow

Toggle button is not working in Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related