ficus ficus - 10 months ago 46
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 Source

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>