Cannot get toggle function (JavaScript to work)

Question

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>

check = "hidden"; if (check == "hidden") will always be true — Paul S.
– Paul S., Commented Nov 10, 2015 at 18:06
I know there was some problem with that. But thank you so much for pointing it. And can you suggest a fix, please? — arthrax
– arthrax, Commented Nov 10, 2015 at 18:08

TbWill4321 · Accepted Answer · 2015-11-10 18:13:03Z

3

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";
        }
    }
})();

edited Nov 10, 2015 at 18:13

answered Nov 10, 2015 at 18:08

TbWill4321

8,6863 gold badges30 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Paul S. Over a year ago

Are you sure you want to else if over else? Not all code paths do things

TbWill4321 Over a year ago

@arthrax Glad it worked. If it fixed your problem for you, please mark an answer as accepted so other users know which solution you used.

Tushar Over a year ago

DOM references can also be moved outside of function

Spencer Wieczorek Over a year ago

@Tushar Only if they are static, otherwise you don't. It's also a good idea to avoid unnecessary global variables.

TbWill4321 Over a year ago

Added an optimized version with most of those suggestions.

|

Collectives™ on Stack Overflow

Cannot get toggle function (JavaScript to work)

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related