Hey guys,
In the app I’m working on, I have a sidebar for navigation which disappears when the screen is too small (basic responsiveness). I then added a burger-menu icon and when you click on it, it unhides (or re-hides) the menu. Here’s the JS:
$(document).on("click", "#burger-menu", function(){
if ($('#sidebar').hasClass('block')) {
$('#sidebar').removeClass('block');
console.log('removed');
} else {
$('#sidebar').addClass('block');
console.log('added');
}
})
As you can see, I added a console.log to see what’s happening.
I tried it in raw html:
- I shrink the page
- The sidebar disappears
- I click the button
- There is no ‘block’ class, so it adds it and the menu appears
- If I reclick, the ‘block’ class is here so it is removed and the menu disappears
But when I try in within Dash (using the same html, css, and js), it’s not working.
- I check the html: no ‘block’ class on the #sidebar element
- I click and the js says “I found the ‘block’ class, removing it” (but it wasn’t there!)
- The menu never appears because each click removes the non-present ‘block’ class
Any ideas?