horizontal-step-box

horizontal-stepbox.js

$(function () {
  if ($('#stepBox').length === 0) {
    return;
  }

  var stepBox = $('#stepBox');
  var stepBoxWidth = stepBox.width();

  stepBox.find('.step-item').width(stepBoxWidth);

  var totalWidth = (function () {
    var totalWidth = 0;
    stepBox.find('.step-item').each(function () {
      totalWidth += $(this).width();
    });
    return totalWidth;
  }());

  $('#stepBoxInner').width(totalWidth);

  var resolveHeight = function () {
    var activeBox = stepBox.find('.step-item.active');
    
    stepBox.animate({height: activeBox.height()});
  };

  setInterval(function () {
    resolveHeight();
  }, 1000);

  var goToItem = function (index) {
    var stepItem = stepBox.find('.step-item[data-index="' + index + '"]');
    var leftOffset = stepItem.offset().left;

    $('.step-item').removeClass('active');
    stepItem.addClass('active');

    $('#stepBoxInner').animate({marginLeft: -1 * stepBoxWidth * index});
    $('html,body').animate({scrollTop: 0});

    resolveHeight();
  };

  $('body').on('click', '[data-toggle="next-step"], [data-toggle="prev-step"]', function (e) {
    e.preventDefault();
    console.log('[data-toggle="next-step"]');
    var increment = $(this).data('toggle') == 'next-step' ? 1 : -1;
    var currentStep = stepBox.find('.step-item.active').data('index');
    var nextStep = currentStep + increment;
    console.log('goToItem: ' + nextStep);

    goToItem(nextStep);
  });
});

<div id="stepBox">
    <div id="stepBoxInner">
         <div id="step_1" data-index="0" class="step-item active">
         </div>
         <div id="step_2" data-index="1" class="step-item">
         </div>
    </div>
</div>

<a href="#" class="btn" data-toggle="next-step">
    Next
</a>

<a href="#" class="btn" data-toggle="prev-step">
     Back
</a>

#stepBox {
  position: relative;
  overflow: hidden;
  .clearfix();
  .step-item {
    float: left;
  }
}