I know this has been asked and answered many times but I can't seem to be able to apply other topics to make it work for me.. so hopefully someone can help me- it feels so close and yet so far..

I've got the jquery script below to create mobile menu toggle, and I used css media queries to hide/show it on different screen widths. This code below makes menu appear when I click on the toggle button but it slides back up straight away:

Code:
jQuery(document).ready(function($) {
    $("#menu-menu-2").hide();
    $(".mtoggle").click(function() {
        $("#menu-menu-2").slideToggle(500);           
    });
});
I tried adding

Code:
return false
which kept the menu open once I clicked toggle button, but clicking on the menu item only closed the menu, but kept me on the same page.

If I understand it correctly the click on the menu item 'activates' the click on the toggle button and so it closes the menu, but I can't find a way to stop it from happening..?

I tried adding this to the jquery code above, instead of 'return false':

Code:
$( "#menu-menu-2" ).click(function( event ) {
  event.stopPropagation();
});
but the menu slides up straight after opening..

Would really appreciate your help as I feel very stuck!

P.S. the website is in maintenance mode so can't share it, sorry!