title: jquery toggle slide from left to right and back
body: <p>I have a "Menu" button on the left hand side of the page and once selected I have a div containing the menu items show.  I then have another button that can be selected to hide the menu.</p>
  
  <p>Ideally I want this to slide out (from left to right) and back but have been unsuccessful in getting this working well. I have tried using animate and SlideToggle but none work well for what I have. Any tips?</p>
  
  <pre><code>&lt;div id="cat_icon"&gt;Menu&lt;/div&gt;
  &lt;div id="categories"&gt;
      &lt;div CLASS="panel_title"&gt;Menu&lt;/div&gt;
      &lt;div CLASS="panel_item"&gt;
          &lt;template:UserControl id="ucCategories" src="UserControls/ProductCategories.ascx" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>$('#cat_icon').click(function () {
      $('#categories').toggle();
      $('#cat_icon').hide();
  });
  $('.panel_title').click(function () {
      $('#categories').toggle();
      $('#cat_icon').show();
  });
  </code></pre>