title: Slide mobile menu left, then down with JQuery
body: <p>I'm trying to have a mobile menu slide from right and then slide down. I was able to do this, but I also need it to slide back up and to the right on second click. However, it just does this simultaneously and after this click it no longer does these animations in order. The code is below. I need to fix it so that during menu open : 1. slides left, 2. drops down. During menu close: 1.slides/wraps up, 2.slides right.</p>
  
  <pre><code>$(".mobile-menu-toggler").click(function (){
  $(this).removeClass('mobile-menu-toggler');
  $(this).addClass('mobile-menu-toggler-clicked');
  $("#mainmenu-mobile").toggle({direction:'left'},700).animate({'height':'100%'},700);
  });
  
  $(".mobile-menu-toggler-clicked").click(function (){
  $(this).removeClass('mobile-menu-toggler-clicked');
  $(this).addClass('mobile-menu-toggler');
  $("#mainmenu-mobile").toggle({direction:'left'},700).animate({'height':'0'},700);
  });
  </code></pre>
  
  <p>P.S. I tried using <code>.show</code> and <code>.hide</code> instead of <code>.toggle</code>. It would show, but then it would not hide.</p>
  
  <p>CSS:</p>
  
  <pre><code>#mainmenu-mobile-wrap {
  display: block;
  position: fixed;
  top:0;
  right: 0;
  z-index: 1000;
  
  height: 100%;
  }
  
  #mainmenu-mobile {
  display: none;
  float: right;
  width: 280px;
  height: 0;
  }
  
  #mobile-menu-toggler{
  width: 50px;
  height: 25px;
  background: red;
  float: left;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/uptjwuaj/" rel="nofollow">http://jsfiddle.net/uptjwuaj/</a></p>