Mega menu - slide panels in the direction based on the clicked link?

Question

I create a "mega-menu" in which there are large panels that slide inward and go out for navigation. The problem I am facing is making the panels slide in the direction based on the fact that the clicked link is before or after the current visible link (therefore, if you click the link that appears after the current visible link, the current panel should slip with screen on the left, and the new panel should move on the right). If you click the links in order, it will work as you wish, but when you start clicking the links out of order, the slide direction will be corrupted.

$('.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 > 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');
});

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;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navigation">
  <a href="#" data-panel="1" class="active">Panel 1</a>
  <a href="#" data-panel="2">Panel 2</a>
  <a href="#" data-panel="3">Panel 3</a>
  <a href="#" data-panel="4">Panel 4</a>
</div>
<div class="panel-container">
  <div class="panel panel-1 active">Panel 1 content</div>
  <div class="panel panel-2">Panel 2 content</div>
  <div class="panel panel-3">Panel 3 content</div>
  <div class="panel panel-4">Panel 4 content</div>
</div>

Run codeHide result

Answer 1

, , reset -.

$('.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 > 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');
  }
  // reset positioning
  $(".panel:lt("+ (currPanel - 1) +")" ).css('left','-100%');
  $(".panel:gt("+ (currPanel - 1) +")" ).css('left','100%');
  // continue
  $('.navigation a').removeClass('active');
  $(this).addClass('active');
});

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;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navigation">
  <a href="#" data-panel="1" class="active">Panel 1</a>
  <a href="#" data-panel="2">Panel 2</a>
  <a href="#" data-panel="3">Panel 3</a>
  <a href="#" data-panel="4">Panel 4</a>
</div>
<div class="panel-container">
  <div class="panel panel-1 active">Panel 1 content</div>
  <div class="panel panel-2">Panel 2 content</div>
  <div class="panel panel-3">Panel 3 content</div>
  <div class="panel panel-4">Panel 4 content</div>
</div>

Hide result