title: Mega menu - slide panels in direction based on clicked link?
body: <p>I am creating a "mega menu" which has large panels that slide in and out below the navigation. The problem I am facing is getting the panels to slide in the direction based on if the clicked link is before or after the currently visible link(so if you click a link that comes after the currently visible link, the current panel should slide off the screen to the left and the new panel should slide in from the right). If you click the links in order, it works as desired, but when you start clicking the links out of order, the slide direction gets messed up.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.navigation a').click(function(e) {
    e.preventDefault();
    var prevPanel = $('.navigation a.active').attr('data-panel');
    var currPanel = $(this).attr('data-panel');
    $('.panel').removeClass('active');
    if (currPanel &gt; prevPanel) {
      $('.panel.panel-' + prevPanel).removeClass('active').css('left', '-100%');
      $('.panel.panel-' + currPanel).addClass('active').css('left','0');
    } else {
      $('.panel.panel-' + prevPanel).removeClass('active').css('left', '100%');
      $('.panel.panel-' + currPanel).addClass('active').css('left','0');
    }
    $('.navigation a').removeClass('active');
    $(this).addClass('active');
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body,html {
    overflow:hidden;
  }
  .navigation {
    text-align:center;
  }
  .panel {
    width:100%;
    height:200px;
    position:absolute;
    left:100%;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
  }
    .panel.active {
      left:0;
    }
    .panel-1 {
      background:red;
    }
    .panel-2 {
      background:green;
    }
    .panel-3 {
      background:blue;
    }
    .panel-4 {
      background:orange;
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="navigation"&gt;
    &lt;a href="#" data-panel="1" class="active"&gt;Panel 1&lt;/a&gt;
    &lt;a href="#" data-panel="2"&gt;Panel 2&lt;/a&gt;
    &lt;a href="#" data-panel="3"&gt;Panel 3&lt;/a&gt;
    &lt;a href="#" data-panel="4"&gt;Panel 4&lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="panel-container"&gt;
    &lt;div class="panel panel-1 active"&gt;Panel 1 content&lt;/div&gt;
    &lt;div class="panel panel-2"&gt;Panel 2 content&lt;/div&gt;
    &lt;div class="panel panel-3"&gt;Panel 3 content&lt;/div&gt;
    &lt;div class="panel panel-4"&gt;Panel 4 content&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>