Toggle menu with Jquery not working

Question

I want to make a toggle menu with jquery in this page: http://propertymanagementoh.com/new-short-header-page/ .There is a menu in the right top. I want to make it toggle when someone will click on the "Menu ☰" button then the menu will appear and again when click on the button then that will disappear(like this: http://www.titleonemanagement.com/ ). I have written the following code but it is not working:

<script>
   $(document).ready(function(){
     $("#block-37").click(function(){
      $("#block-38 .menu").toggle();
    }); 
   }); 
</script>

Also used the following css:

#block-38 .menu{
   position:fixed;
   top:0;
   right:0;
   width:250px;
   overflow:hidden;
   z-index:999999;
 }

Answer 1

There were two jquery scripts being used, meaning that the jQuery.noConflict(true) was causing an issue with the second set of jquery instructions.

Advised user to combine scripts and it worked!

:)

Additional help as per comment: A few things need to be done to assist with this. 1) In your css add this:

#block38 .nav-vertical.active {
   rgba(0,0,0,.5);
   position:fixed;
   top:0;
   left:0;
   z-index:999;
   width:100%;
   height:100%;
}
#whitewrap.notactive {
    margin-left:-235px;
}

2) Change your jquery from

$("#block-37").click(function(){
    $("#block-38 .menu").toggle();
});

to:

$("#block-37").click(function(){
    $("#block-38 .menu").toggle();
    $("#block38 .nav-vertical").toggleClass("active");
    $("#whitewrap").toggleClass("notactive");
});

You need to add in another button once the menu is open so that the user can close it. To do the cross: Make an image or div and give it the class of "closeNav".

Then change your jquery:

$("#block-37, .closeNav").click(function(){
    $("#block-38 .menu").toggle();
    $("#block38 .nav-vertical").toggleClass("active");
    $("#whitewrap").toggleClass("notactive");
});