Toggle a simple navigation in Javascript

Question

I want to have a very simple navigation menu. It has to be clickable. So when using this code

var isActive = true;

function toggleMenu(){
    var content = $("#navContent");

    isActive = !isActive; // toggle the current menu state
    if(isActive) {
        content.display = "block"; // show the items
    } else {
        content.display = "none"; // hide all items
        content.position = "absolute";
        content.zIndex = 1;
    }
}

#navContainer {
    position: relative;
    display: inline-block;
}

#navContent button {
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body onLoad="toggleMenu()">

<div id="navContainer">
    <button id="navBtn" onclick="toggleMenu()">Menu</button>
    <div id="navContent">
        <button>1</button>
        <button>2</button>
        <button>3</button>
        <button>4</button>
    </div>
</div>

</body>

and pressing on the menu button, I get into the toggleMenu() function but the items don't hide.

Can someone help me out?

$("#navContent") returns a jQuery object, but to directly access .style you would need the reference to a DOM element. But jQuery has methods to manipulate element styles, so there is not need to mix these two approaches in the first place. It has .show/.hide as well (although these are not the ideal way to do this either - you should rather just toggle a class, and leave formatting to your stylesheet.) — C3roe
– C3roe, Commented Aug 14, 2017 at 12:10
Not sure why you don't just use toggle() for this and set the display to hidden in css to hide the menu upon page rendering but if you want to continue with the method you're using then you should be targeting the css before trying to target and change a css property. Example: content.css("display", "block"); — NewToJS
– NewToJS, Commented Aug 14, 2017 at 12:15

Rory McCrossan · Accepted Answer · 2017-08-14 12:10:07Z

3

Your code is a rather odd mix of plain JS and jQuery. I'd suggest using one or the other. Here's a simple version of your code using jQuery:

$(function() {
  $('#navBtn').click(function() {
    $('#navContent').toggle();
  }); 
});

#navContainer {
  position: relative;
  display: inline-block;
}

#navContent button {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="navContainer">
  <button id="navBtn">Menu</button>
  <div id="navContent">
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
  </div>
</div>

answered Aug 14, 2017 at 12:10

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

1 Comment

peterHasemann Over a year ago

ah, element.toggle() keeps the code very clean :)

Vilsol · Accepted Answer · 2017-08-14 12:11:14Z

0

It would be much easier to make a CSS class that hides the elements, which is then toggled by JS. This answer doesn't require jQuery

function toggleMenu(){
    document.getElementById('navContent').classList.toggle("hidden")
}

#navContainer {
    position: relative;
    display: inline-block;
}

#navContent button {
    display: block;
}

.hidden {
    display: none;
}

<div id="navContainer">
    <button id="navBtn" onclick="toggleMenu()">Menu</button>
    <div id="navContent" class="hidden">
        <button>1</button>
        <button>2</button>
        <button>3</button>
        <button>4</button>
    </div>
</div>

answered Aug 14, 2017 at 12:11

Vilsol

7321 gold badge8 silver badges17 bronze badges

Comments

score 0 · Accepted Answer · 2017-08-14 12:17:43Z

0

Why not simplify it to:

$("#navBtn").click(function() {
  $("#navContent").toggle();
});

#navContainer {
  position: relative;
  display: inline-block;
}

#navContent {
  display: none;
}

#navContent button {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>

  <div id="navContainer">
    <button id="navBtn">Menu</button>
    <div id="navContent">
      <button>1</button>
      <button>2</button>
      <button>3</button>
      <button>4</button>
    </div>
  </div>

</body>

edited Aug 14, 2017 at 12:17

answered Aug 14, 2017 at 12:15

user4563161

Collectives™ on Stack Overflow

Toggle a simple navigation in Javascript

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related