CODEWITHSUNDEEP
javascripthtmlcss
arthrax
arthrax

Reputation: 171

Cannot get toggle function (JavaScript to work)

I am trying to build a simple toggle button using JavaScript, not jQuery, to translate the element back and forth. I did my best a newbie (for JavaScript) but cannot figure it out. The main idea is that the side menu should show from the side when clicked on the button and should hide back to the same place when it is clicked again. Please help.

function toggleNavBar() {
  var nav = document.getElementById("sideNav"),
    button = document.getElementById("checkButton"),
    check = "hidden";
  if (check == "hidden") {
    nav.style.transform = "translate(0px)";
    check = "shown";
  } else if (check == "shown") {
    nav.style.transform = "translate(-290px)";
    check = "hidden";
  }
}
body {
  margin: 0 auto;
  padding: 0;
}
#sideNav {
  background-color: #96e6b3;
  display: inline-block;
  width: 20%;
  position: fixed;
  height: 100vh;
  z-index: 2;
  overflow: hidden;
  -webkit-transform: translate(-290px);
  /* Safari */
  transform: translate(-290px);
  */
}
nav ul {
  list-style-type: none;
  font-family: Junction, "Times New Roman", sans-serif;
  font-size: 1.9em;
  margin-top: 24%;
}
nav ul li {
  margin-top: 1%;
  padding-top: 4.7%;
  margin-left: -50px;
  text-align: center;
}
nav a {
  text-decoration: none;
  color: #000000;
}
nav li:hover {
  background-color: #34cf6d;
}
<!doctype html>
<html lang="en">

<head>
  <title>Check</title>
  <meta charset="UTF-8">
  <link href="style.css" rel="stylesheet" type="text/css">
  <link href="font.css" rel="stylesheet" type="text/css">
  <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <link rel="stylesheet" href="styleCheck.css">

  <style>
    <!--very specific small CSS for this document--> #toggler {
      text-decoration: underline;
    }
    #toggler:hover {
      cursor: pointer;
    }
  </style>

</head>

<body>
  <div>
    <div class="o-content">
      <div class="o-container">
        <div class="o-grid">
          <button id="checkButton" class="c-hamburger c-hamburger--htx" onclick="toggleNavBar()">
            <span>toggle menu</span>
          </button>
        </div>
      </div>
    </div>
  </div>
  <div id="sideNav">
    <nav>
      <ul>
        <li><a href="indexCheck.htm">Home</a>
        </li>
        <li><a href="items.htm">Items</a>
        </li>
        <li><a href="XML.htm">XML</a>
        </li>
      </ul>
    </nav>
  </div>
  <!--side Nav-->

</body>

</html>

Upvotes: 0

Views: 67

Answers (1)

TbWill4321
TbWill4321

Reputation: 8666

You should only declare your check variable once:

var check = "hidden";

function toggleNavBar() {
    var nav = document.getElementById("sideNav"),
        button = document.getElementById("checkButton");
    if (check == "hidden") {
        nav.style.transform = "translate(0px)";
        check = "shown";
    } else if (check == "shown") {
        nav.style.transform = "translate(-290px)";
        check = "hidden";
    }
}

A few optimizations (assuming this is done after document is ready):

var toggleNavBar = (function() {
    var check = "hidden";
    var nav = document.getElementById("sideNav");
    var button = document.getElementById("checkButton");
    return function() {
        if (check == "hidden") {
            nav.style.transform = "translate(0px)";
            check = "shown";
        } else {
            nav.style.transform = "translate(-290px)";
            check = "hidden";
        }
    }
})();

Upvotes: 3

Related Questions