JS OK in HTML but KO in Dash

Dash Python
1

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?

2

Ironically, if I manually add the ‘block’ class in the raw HTML then trigger the JS, it then always ‘adds’ it and never removes it. Each click triggers the ‘adding’ loop even though the class is already there. It’s basically doing the complete opposite of the function.