ficus ficus - 1 month ago 15
CSS Question

jQuery slider/switcher/tabs

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

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

   

 $(document).ready(function(){
$('.nextStep').click(function (e) {
  	e.preventDefault();	
	var stepActive = $('.stepActive');
    if (!stepActive.filter('.stepThree').length)
    	stepActive.next().children('.stepNumber')[0].click();
    else
    	 $('.stepOne > .stepNumber')[0].click();
  });

  $('.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, .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 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>
<div class="step nextStep">Next</div>