Vertical Sliding nav menu isn't working

Question

I wanna ask you something once again. So I wanna make my vertical menu a vertical sliding menu, which pushes site content when triggered. My function to toggle it does not work (I don't know if other effects like transition and translation works too, because menu active class isn't toggled).
When I click on my button nothing shows, even errors... I don't really know where is the problem.
Here is my code:

(function() {
  var bodyEl = $('body'),
    mobileicon = bodyEl.find('.mobile-icon');

  mobileicon.on('click', function(e) {
    bodyEl.toggleClass('active-mobile-menu');
    e.preventDefault();

  });

});

/*-----------------------------------------------
Mobile Icon Style
-----------------------------------------------*/

.mobile-icon {
  position: absolute;
  display: block;
  width: 40px;
  z-index: 5;
}
.mobile-icon:before {
  width: 100%;
  font-size: 2em;
  font-family: "ElegantIcons";
  font-weight: bold;
  text-align: center;
  content: "\64";
}
.mobile-icon:hover {
  color: white;
  background: black;
}
/*----------------------------------------------
Mobile Menu style
-----------------------------------------------*/

.mobile-show {
  dispay: block;
}
.mobile-menu {
  overflow: scroll;
  position: fixed;
  height: 100%;
  width: 70%;
  background: white;
  z-index: 1000;
  transform: translate3d(-100%, 0, 0);
  transition: transform 0.4s ease;
}
.active-mobile-menu div {
  transform: translate3d(0, 0, 0);
}
.active-mobile-menu .mobile-menu {
  transform: translate3d(100%, 0, 0);
}
.mobile-menu ul {
  top: 10.2%;
  color: black;
  position: relative;
  text-align: left;
  font-weight: bold;
}
.mobile-menu li a {
  display: block;
  padding: 4% 0;
  border-bottom: 1px solid black;
}
.mobile-menu > ul> li:hover > a,
.mobile-menu > ul> li:hover > .sub-menu > li:hover > a,
.mobile-menu > ul .sub-menu .sub-menu > li:hover > a {
  background-color: #111;
  color: #fff;
}
.mobile-menu ul li ul {
  height: 100%;
  width: 100%;
  visibility: hidden;
  display: none;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
  background: #fff;
  border: none;
  position: relative;
}
.mobile-menu ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

<span class="mobile-icon"></span>
<div class="mobile-menu">
  <header class="mobile-header">
    <div class="mobile-branding">
      <!--here is my logo code,its long so i don't wanna to slow you down-->
    </div>
  </header>
  <ul class="mobile-menu-ul">
    <div class="caret"></div>
    <?php wp_nav_menu(array ( 'theme_location'=>'new-menu', 'container' => '', 'items_wrap' => '%3$s' )); ?>
  </ul>
</div>

Answer 1

Well i find the solution by myself,i was added $(document).ready(function(){}); into the start of the document.And i putted my variables in new function,in which i put new function,so there was 3 functions in one another,and that was the conflict.Now its working,Thanks for your time guys <3

Answer 2

When I run your code through jsbin, the toggle works. I had to include the jQuery library, as you can see by the line

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

It is my suspicion that you do not have the jQuery library loaded on your page properly.