Javascript functions with jQuery not fully working

Question

enter image description hereI am using a hamburger menu which toggles class with jQuery and fades in/out a hidden menu using Javascript all in the same click function. It is working except that the icon has to be clicked twice before the menu fades in initially, not even double clicking gets it to work at the same time as the icon toggles class, after that it is fine and works as expected, just the delay on first opening page, Or is there a way to do it better with jQuery, I did try a couple of ways but couldn't get it. The code is below:

 // In javascript
$( document ).ready(function() {
 $(".hamburger").click(function() {
 $("#primary_nav").toggleClass("is-active");
 }
});
// In CSS
#primary_nav {
 opacity: 0;
 pointer-events: none;
 transition: opacity 300ms;
}
#primary_nav.is-active {
 opacity: 1;
 pointer-events: auto;
}

Its all inside an init() function so Im not sure if I need the document ready. (I am using Sage 9 for Wordpress) Any tips welcome. Thanks

Update I scrapped the javascript fades to use the jQuery toggle and css as in below answer, so its like that at the moment. The original Javascript target the js-btn on click. Wordpress generates extra classes menu-main-container etc as in image below. Just need this little bit to finish the nav. Thanks

• Jon P: Some HTML for context would be great, a minimal reproducible example would be even better.
• minimallinux: Added HTML, Thanks
• Jon P: That's a start, but can you change it to the HTML that is rendered to the page, hit "View Source" on the page to get the HTML that is rendered by Wordpress.

Answer 1

You asked for another way, so that's what I'm providing. I don't like doing simple transitions like this in JS - I find them easier and more performant in CSS. So here's my suggestion:

// In javascript
$( document ).ready(function() {
 $(".hamburger").click(function() {
 $("#primary_nav").toggleClass("is-active");
 }
});
// In CSS
#primary_nav {
 opacity: 0;
 pointer-events: none;
 transition: opacity 300ms;
}
#primary_nav.is-active {
 opacity: 1;
 pointer-events: auto;
}
@media (min-width: 920px){
 #primary_nav {
 opacity: 1;
 pointer-events: auto;
 }
}

• minimallinux: Hi, this looks better but I cant get it to work CSS @media only screen and (max-width: 899px) { #primary_nav { opacity: 0; pointer-events: none; transition: opacity 300ms; } #primary_nav.is-active { opacity: 1; pointer-events: auto; } } JS export default { init() { // JavaScript to be fired on all pages $( document ).ready(function() { $(".hamburger").click(function() { $(this).toggleClass("is-active"); $("#primary_nav").toggleClass("is-active"); }); }); }, Thanks
• minimallinux: I added the HTML above, Thanks
• minimallinux: Hi, I got this working now as in above example, just one question though, on resizing the browser to check, the nav is still visible for a while before it disappears, will this happen if a user access page on a mobile device? Thanks
• I'm Joe Too: You can add a resize listener to remove the class which would close the menu. I wouldn't go crazy with this though - it's usually us developers who are constantly resizing the browser to test for responsiveness. I'd bet the majority of your users won't even rotate their phones, and there's no other "resize" even on phones or tablets.
• minimallinux: So, it wouldn't affect a user who just browed to the page on their 320px phone or tablet? BTW Thanks for that it pretty much fixed it! Useful to know we can use CSS instead of JS.