jQuery slider/switcher/tabs

Question

I had no idea how to title this topic, sorry for that. I am building simple shopping cart splited into few steps. The whole thing is supposed to work similar to sliders or well-known tabs.

Let's see the code to make things easier.

$(document).ready(function(){
  $('.stepNumber').click(function(e) {
    e.preventDefault();
    var stepDesc = $(this).next('.stepDesc');

    if(!stepDesc.is(':visible')) {
      $('.step').removeClass('stepActive');
      $(this).parent().addClass('stepActive');
    }

    var val = parseInt($('.step.stepActive').children('div.stepNumber').text());

    switch(val) {
      case 1:
        $('.formStepTwo').hide();
        $('.formStepOne').show();

        break;
      case 2:
        $('.formStepOne').hide();
        $('.formStepTwo').show();
        break;
      case 3:
        alert('blabla');
        break;
    }

  });
});

.formStep {
  display: none;
}
step {
  float: left;
  border: 1px solid #333;
  margin-right: 5px;
}

.stepNumber {
  background: #333;
  color: #fff;
  float: left;
  padding: 6px 10px;
}
.stepDesc {
  text-align: left;
  padding: 6px 10px;
  width: 150px;
  display: none;
}

.stepActive > .stepDesc {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="step stepOne stepActive">
  <div class="stepNumber">1</div>
  <div class="stepDesc">Cart</div>
</div>
<div class="step stepTwo">
  <div class="stepNumber">2</div>
  <div class="stepDesc">Client data</div>
</div>
<div class="step stepThree">
  <div class="stepNumber">3</div>
  <div class="stepDesc">Shipping data</div>
</div>

<div class="formStep formStepOne">
  Something - tab content
</div>
<div class="formStep formStepTwo">
  Something else
</div>

Sorry for the appearance, some cosmetic css is missing here.

The actual problem: I want to add button "Next" just under my "tab content". If we're in the step 1 at this moment, clicking that button should take us to step 2 and so on. In the meantime time our "tab menu" script should be activated - as in the snippet: close description of others step, show current description and add class "stepActive".

Almost the same thing you can find in common sliders: arrows (next, prev) to move between slides and also "dot menu" with correct dot being highlighted.

Answer 1

If I'm not mistaken, it's something like that, what you wanted, isn't it?

   

$(document).ready(function(){
    
     $('.stepNumber:contains(3)').click(function(){
        alert('blabla');
      });
        
    $('.nextStep').click(function (e) {
      	e.preventDefault();	
    	var stepActive = $('.stepActive');
        if (stepActive.next('.step').length)
        	stepActive.next().children('.stepNumber')[0].click();
        else
        	 $('.step > .stepNumber')[0].click();
      });
    
      $('.stepNumber').click(function(e) {
        e.preventDefault();
    
    	var obj = $(this);
        var parent = obj.parent();
    	var stepDesc = obj.next('.stepDesc');
    
        if(!stepDesc.is(':visible')) {
          $('.step').removeClass('stepActive');
          parent.addClass('stepActive');
        }
    
    	$('[id^=step]').hide();
    	$('#step' + obj.text()).show();
    	
      });
      
      $('.stepNumber')[0].click();
    });

.formStep {
  display: none;
}
.step {
  float: left;
  border: 1px solid #333;
  margin-right: 5px;
}

.stepNumber, .nextStep {
  background: #333;
  color: #fff;
  float: left;
  padding: 6px 10px;
}

.stepDesc {
  text-align: left;
  padding: 6px 10px;
  width: 150px;
  display: none;
}

.stepActive > .stepDesc {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <div class="step">
  <div class="stepNumber">1</div>
  <div class="stepDesc">Cart</div>
</div>
<div class="step">
  <div class="stepNumber">2</div>
  <div class="stepDesc">Client data</div>
</div>
<div class="step">
  <div class="stepNumber">3</div>
  <div class="stepDesc">Shipping data</div>
</div>
<div id="step1" class="formStep">
  Something - tab content
</div>
<div id="step2" class="formStep">
  Something else
</div>
<div id="step3" class="formStep">
	The last one
</div>
<div class="nextStep">Next</div>