CODEWITHSUNDEEP
javascripthtmlcss
Jeflopo
Jeflopo

Reputation: 2262

Toggle button not working. Not having display: none; at first click

I'm trying to do a toggle button with js, but the first time it's clicked it is not working. Since the nav.display.display has no value although it has display: none; in the CSS code.

I guess there should be an issue on how I'm using onload... as if the css wasn't loaded yet. But I've read that window.onload waits for all to load. So I don't really know what's happening.

This is how I'm loading it, in real code (outside jsfiddle that handles onload)

window.onload = function() {
    var el = document.querySelector('.nav-toggle');
    el.addEventListener("click", toggleNav, false);
};

NO jQuery please.

Here's the jsfiddle:

function toggleNav() {
  var nav = document.querySelector('#navigation');
  alert(nav.style.display);
  
  if (nav.style.display == 'none') {
    nav.style.display = 'flex';
  } else {
    nav.style.display = 'none';
  }
}
var el = document.querySelector('.nav-toggle');
el.addEventListener("click", toggleNav, false);
#navigation {
    display: none;
}
<button class="nav-toggle">Toggle</button>
<nav id="navigation">
    <ul>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
        <li><a href="#">Item 5</a></li>
    </ul>
</nav>

Upvotes: 1

Views: 1756

Answers (3)

user6213434
user6213434

Reputation:

You can access style via getComputedStyle() instead of style

var btn = document.querySelector('.nav-toggle'),
    nav = document.getElementById('navigation');
    
btn.addEventListener('click', function (e) {
  e.preventDefault()
  if (window.getComputedStyle(nav, null).display == 'none') {
    nav.style.display = 'flex';
  } else {
    nav.style.display = 'none';
  }
});
#navigation {
    display: none;
}
<button class="nav-toggle">Toggle</button>
<nav id="navigation">
    <ul>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
        <li><a href="#">Item 5</a></li>
    </ul>
</nav>

Upvotes: 0

Jeflopo
Jeflopo

Reputation: 2262

Thanks to @Aliester comment I figured it out :)

function toggleNav() {
  var nav = document.getElementById('navigation');
  
  if (nav.offsetWidth == 0 && nav.offsetHeight == 0) {
    nav.style.display = 'flex';
  } else {
    nav.style.display = 'none';
  }
}
var el = document.querySelector('.nav-toggle');
el.addEventListener("click", toggleNav, false);
#navigation {
    display: none;
}
<button class="nav-toggle">Toggle</button>
<nav id="navigation">
    <ul>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
        <li><a href="#">Item 5</a></li>
    </ul>
</nav>

Upvotes: 2

Undecided Dev
Undecided Dev

Reputation: 830

Add Disply:none on your #navigation hope this one works.

function toggleNav() {
  var nav = document.getElementById('navigation');
  
  
  if (nav.style.display == 'none') {
    nav.style.display = 'block';
    
  } else {
    nav.style.display = 'none';
  }
}
var el = document.querySelector('.nav-toggle');
el.addEventListener("click", toggleNav, false);
#navigation {
    display: none;
}
<button class="nav-toggle">Toggle</button>
<nav id="navigation">
    <ul>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
        <li><a href="#">Item 5</a></li>
    </ul>
</nav>

Upvotes: 0

Related Questions