jQuery Not Working On WordPress Divi Theme Mobile View

Question

Good day, All!

I built a WordPress site using Elegant Theme's Divi theme. Everything went well, until I start working on the mobile view. One of my menu item named "Vehicle" has a class of "btn-vehicle". Now on the desktop view, everytime a user clicks on the menu-item Vehicle, a hidden section with an ID of "#vehicle-categories" shows up by using.slideToggle()

Here's my script:

jQuery(".btn-vehicle").click(function(e){
  jQuery("#ourdealerships").hide();
e.preventDefault();
jQuery("#vehicle-categories").slideToggle();
jQuery(".btn-vehicle").toggleClass("opened closed");
});

That code works well on desktop view. But if i adjust my browser's screen size to a mobile view, If I click on the hamburger, the menu shows up, and if I click on Vehicle, the menu just closes without showing the #vehicle-categories.

This is the desktop view. If I click Vehicle in the menu, this section will show up below.

This is the mobile view. If Vehicle is clicked, the whole menu hides and nothing happens after that.

Even console.log is not working on mobile view. I want to test jQuery by using console.log("test") every time Vehicle is clicked.

Can someone pls help me? Thank you

Answer 1

Seems this is solved by putting a delay to call the function that declares the jquery click actions

$(window).load(function () {
    setTimeout(function () {
       setupActions();
    }, 700);
});

function setupActions() {
    //do your actions here
}