How can I change the provided jQuery to toggle menu correctly?

Question

I have a hamburger menu icon displayed and want it to have a drop down menu, shown here:

<div id="nav-icon">
  <div id="hamburger-nav"></div>
  <ul id="nav-list">
    <li><a id="about" href="#about">about</a></li>
    <li><a id="work" href="#work">work</a></li>
    <li><a id="contact" href="#contact">contact</a></li>
  </ul>
</div>

This menu's display is set to "none". Below is my jQuery I am using to display the nav list. I want it to appear when clicked and disappear when clicked again (toggle). Why does this not work? What adjustments need to be made? jsfiddle here

$(document).ready(function() {
    var n = $("#nav-list");

    $("#nav-icon").click(function() {
        if (n.css("display, none")) {
            n.css("display, block");
        } else {
            n.css("display, none");
        }
    });
});

Answer 1

I would use :hidden to check if the menu is hidden/visible, then you need to separate the CSS in $.css() with quotes.

 $(document).ready(function() { var $n = $("#nav-list"); $("#nav-icon").click(function() { if ($n.is(':hidden')) { $n.css("display","block"); } else { $n.css("display","none"); } }); }); 

 #nav-icon { display: block; padding: 1.3em; position: absolute; top: 1.6em; right: .8em; cursor: pointer; } #hamburger-nav, #hamburger-nav::before, #hamburger-nav::after { content: ""; display: block; width: 2.3em; height: 3px; background: #000; } #hamburger-nav::after { transform: translateY(-.75em); } #hamburger-nav::before { transform: translateY(.6em); } #nav-list { display: none; list-style: none; position: absolute; top: 4.2em; left: -6em; width: 12em; height: 10em; z-index: 5; background: #fff; border-left: 1px solid #ccc; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; } #nav-list li { text-align: center; position: relative; right: 2.8em; padding: .95em; width: 12em; font-weight: 600; border-top: 1px solid #ccc; } #nav-list a { color: #000; text-decoration: none; } #top:hover { border-bottom: 2px solid #0f0; } #middle:hover { border-bottom: 2px solid #f00; } #botttom:hover { border-bottom: 2px solid #00f; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="nav-icon"> <div id="hamburger-nav"></div> <ul id="nav-list"> <li><a id="top" href="#about">about</a></li> <li><a id="middle" href="#work">work</a></li> <li><a id="bottom" href="#contact">contact</a></li> </ul> </div> 

Answer 2

The problem is with the typos you have in your code ( https://codepen.io/anon/pen/rwyNqM ):

$(document).ready(function() {
  var n = $("#nav-list");
  $("#nav-icon").click(function() {
    // This is how we check the current display value.
    if (n.css("display") === "none") {
      // First parameter and second parameter should be in quotes.
      n.css("display", "block");
    } else {
      n.css("display", "none");
    }
  });
});

Answer 3

Your code is good u have few syntax mistakes

 $(document).ready(function() { var n = $("#nav-list"); $("#nav-icon").click(function() { if (n.css("display") == "none") { n.css("display","block"); } else { n.css("display","none"); } /* * n.slideToggle(); * n.toggle(); * n.fadeToggle(); * */ }); }); 

 #nav-icon { display: block; padding: 1.3em; position: absolute; top: 1.6em; right: .8em; cursor: pointer; } #hamburger-nav, #hamburger-nav::before, #hamburger-nav::after { content: ""; display: block; width: 2.3em; height: 3px; background: #000; } #hamburger-nav::after { transform: translateY(-.75em); } #hamburger-nav::before { transform: translateY(.6em); } #nav-list { display: none; list-style: none; position: absolute; top: 4.2em; left: -6em; width: 12em; height: 10em; z-index: 5; background: #fff; border-left: 1px solid #ccc; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; } #nav-list li { text-align: center; position: relative; right: 2.8em; padding: .95em; width: 12em; font-weight: 600; border-top: 1px solid #ccc; } #nav-list a { color: #000; text-decoration: none; } #top:hover { border-bottom: 2px solid #0f0; } #middle:hover { border-bottom: 2px solid #f00; } #botttom:hover { border-bottom: 2px solid #00f; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="nav-icon"> <div id="hamburger-nav"></div> <ul id="nav-list"> <li><a id="top" href="#about">about</a></li> <li><a id="middle" href="#work">work</a></li> <li><a id="bottom" href="#contact">contact</a></li> </ul> </div> 

Answer 4

Play with toggle class more easy and simply can apply some effect just by CSS. Check out this 2 option:

with pure javascript:

 document.getElementById("nav-icon").onclick = function(){ this.classList.toggle('show-nav-list'); } 

 #nav-icon { display: block; padding: 1.3em; position: absolute; top: 1.6em; right: .8em; cursor: pointer; } #hamburger-nav, #hamburger-nav::before, #hamburger-nav::after { content: ""; display: block; width: 2.3em; height: 3px; background: #000; } #hamburger-nav::after { transform: translateY(-.75em); } #hamburger-nav::before { transform: translateY(.6em); } #nav-list { display:none; list-style: none; position: absolute; top: 4.2em; left: -6em; width: 12em; height: 10em; z-index: 5; background: #fff; border-left: 1px solid #ccc; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; } #nav-list li { text-align: center; position: relative; right: 2.8em; padding: .95em; width: 12em; font-weight: 600; border-top: 1px solid #ccc; } #nav-list a { color: #000; text-decoration: none; } #top:hover { border-bottom: 2px solid #0f0; } #middle:hover { border-bottom: 2px solid #f00; } #botttom:hover { border-bottom: 2px solid #00f; } .show-nav-list #nav-list { display:block !important; } 

 <div id="nav-icon"> <div id="hamburger-nav"></div> <ul id="nav-list" > <li><a id="top" href="#about">about</a></li> <li><a id="middle" href="#work">work</a></li> <li><a id="bottom" href="#contact">contact</a></li> </ul> </div> 

or With Jquery:

 $(function(){ $('#nav-icon').click(function(){ $("#nav-list").toggleClass("show-nav-list") }) }) 

 /* Check last line of this CSS, i add .show-nav-list class CSS*/ #nav-icon { display: block; padding: 1.3em; position: absolute; top: 1.6em; right: .8em; cursor: pointer; } #hamburger-nav, #hamburger-nav::before, #hamburger-nav::after { content: ""; display: block; width: 2.3em; height: 3px; background: #000; } #hamburger-nav::after { transform: translateY(-.75em); } #hamburger-nav::before { transform: translateY(.6em); } #nav-list { display: none; list-style: none; position: absolute; top: 4.2em; left: -6em; width: 12em; height: 10em; z-index: 5; background: #fff; border-left: 1px solid #ccc; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; } #nav-list li { text-align: center; position: relative; right: 2.8em; padding: .95em; width: 12em; font-weight: 600; border-top: 1px solid #ccc; } #nav-list a { color: #000; text-decoration: none; } #top:hover { border-bottom: 2px solid #0f0; } #middle:hover { border-bottom: 2px solid #f00; } #botttom:hover { border-bottom: 2px solid #00f; } .show-nav-list { display:block !important; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <div id="nav-icon"> <div id="hamburger-nav"></div> <ul id="nav-list"> <li><a id="top" href="#about">about</a></li> <li><a id="middle" href="#work">work</a></li> <li><a id="bottom" href="#contact">contact</a></li> </ul> </div>