Making a jquery slide out menu that toggles

Question

I currently have a jquery menu that opens when you click menu and closes when you click the X in the top left but I would like to make it toggle by clicking menu. I'm very new to jquery and would appreciate any help with this
I looked at another similar question but I didn't see how I could fit it into mine unless I re-wrote it

var main = function() {
  /* Push the body and the nav over by 285px over */
  $('.icon-menu').click(function() {
    $('.menu').animate({
      left: "0px"
    }, 200);

    $('body').animate({
      left: "285px"
    }, 200);
  });

  /* Then push them back */
  $('.icon-close').click(function() {
    $('.menu').animate({
      left: "-285px"
    }, 200);

    $('body').animate({
      left: "0px"
    }, 200);
  });
};


$(document).ready(main);

/* Initial body */
body {
  left: 0;
  margin: 0;
  overflow: hidden;
  position: relative;
}

/* Initial menu */
.menu {
  background: #202024 url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/black-thread.png') repeat left top;
  left: -285px;  /* start off behind the scenes */
  height: 100%;
  position: fixed;
  width: 285px;
}

/* Basic styling */
.menu ul {
  border-top: 1px solid #636366;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu li {
  border-bottom: 1px solid #636366;
  font-family: 'Open Sans', sans-serif;
  line-height: 45px;
  padding-bottom: 3px;
  padding-left: 20px;
  padding-top: 3px;
}

.menu a {
  color: #fff;
  font-size: 15px;
  text-decoration: none;
  text-transform: uppercase;
}

.icon-close {
  cursor: pointer;
  padding-left: 10px;
  padding-top: 10px;
}

.icon-menu {
  color: #000;
  cursor: pointer;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  padding-bottom: 25px;
  padding-left: 25px;
  padding-top: 25px;
  text-decoration: none;
  text-transform: uppercase;
}

.icon-menu i {
  margin-right: 5px;
}

<div class="menu">
      
      <!-- Menu icon -->
      <div class="icon-close">
        <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
      </div>

      <!-- Menu -->
      <ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Help</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>

    <!-- Main body -->
      <div class="icon-menu">
        Menu
      </div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="../js/sliding-menu.js"></script>

Answer 1

The simplest way to do that is to keep a variable with the state of your menu (open or closed).

Your function could be something like this :

var main = function() {
    var menuState = 'closed';

    $('.icon-menu').click(function(e) {
        if(menuState == 'closed') {
            open();
        }
        else {
            close();
        }
    });

    $('.icon-close').click(function() {
        close();
    });

    function open() {
        if(menuState == 'closed') {
            $('.menu').animate({
                left: "0px"
            }, 200);

            $('body').animate({
                left: "285px"
            }, 200);
            menuState = 'opened';
        }
    }

    function close() {
        if(menuState == 'opened') {
            $('.menu').animate({
                left: "-285px"
            }, 200);

            $('body').animate({
                left: "0px"
            }, 200);
            menuState = 'closed';
        }
    }
};

$(document).ready(main);

Answer 2

You can try following :

$('.icon-menu').click(function(){       
    var menu_var = $('#menu');
    var body_var = $('body');
    if (body_var.hasClass('menu_opened')){      
        body_var.animate({"right":"-100%"}, "fast").removeClass('menu_opened');
        body_var.animate({ "left": "0%" }, "fast").removeClass('menu_opened');
    } else {
        body_var.animate({"right":"0%"}, "fast").addClass('menu_opened');
        body_var.animate({ "left": "-80%" }, "fast").addClass('menu_opened');
    }
});

This function will works perfectly. But, you have to write some CSS to make the function working proper.

Answer 3

$('.icon-menu').click(function() {
    let menu = $(this);

    if (!menu.data('isOpen')) {
        menu.data('isOpen', true);

        $('.menu').animate({
            left: "0px"
        }, 200);

        $('body').animate({
            left: "285px"
        }, 200);
    }
    else {
        menu.data('isOpen', false);

        $('.menu').animate({
            left: "285px" // check the value
        }, 200);

        $('body').animate({
            left: "0px" // check the value
        }, 200);
    }
});