jquery show only next div with same class

Question

I'm trying to do a sequence of steps with jquery but I'm failing to achieve the result I want.

I have 3 steps, with a class of .wiki-step- plus a number. my javascript is this one:

function stepping() {
    var stepButton = $("a.button");
    var step = $("[class*='wiki-step-']");
    stepButton.closest(step).hide().next(step).show();
}

$("a.button").on("click",function(){
    stepping();
});

It works correctly with only 2 steps but I've noticed that if I add a third one, the jquery (next) shows all the other steps at once but I want to show only the next div in line, not all of them.

Here's a fiddle: https://jsfiddle.net/vsomcag2/1/ you can see how it shows the 2nd and 3rd step at once.

I can't use nextUntil() i guess, I think I should use a counter of some sort but I don't know where to start. I would like to avoid specifying numbers because I would like to have the ability to add or remove steps without editing the js.

Any help is greatly appreciated.

  function stepping() { var stepButton = $("a.button"); var step = $("[class*='wiki-step-']"); stepButton.closest(step).hide().next(step).show(); } $("a.button").on("click",function(){ stepping(); }); 

 div[class*="wiki-step-"] { display: none; width: 500px; height: 500px; border:1px solid red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wiki-step-1" style="display:block"> <h1>step 1</h1> <a href="#" class="button">next</a> </div> <div class="wiki-step-2"> <h1>step 2</h1> <a href="#" class="button">next</a> </div> <div class="wiki-step-3"> <h1>step 3</h1> </div> 

Answer 1

You need to get reference to the clicked object a and show hide according to that object.

function stepping(obj) {
  var stepButton = $(obj);
  var step = $("[class*='wiki-step-']");
  stepButton.closest(step).hide().next(step).show();
}

$("a.button").on("click", function () {
   stepping(this);
});

Here is jsfiddle

Answer 2

Could be pretty simple:

$("a.button").on("click",function(){
        $(this).parent().hide();
        $(this).parent().next().show();
    });

Demo: https://jsfiddle.net/vsomcag2/3/

Answer 3

If you want to show only one at a time you can use this:

 function stepping(elem) { var step = $("[class*='wiki-step-']"); elem.closest(step).hide().next(step).show().next(step).hide(); } $("a.button").on("click", function() { stepping($(this)); }); 

 div[class*="wiki-step-"] { display: none; width: 500px; height: 500px; border: 1px solid red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wiki-step-1" style="display:block"> <h1>step 1</h1> <a href="#" class="button">next</a> </div> <div class="wiki-step-2"> <h1>step 2</h1> <a href="#" class="button">next</a> </div> <div class="wiki-step-3"> <h1>step 3</h1> </div> 

Basically what I am doing is passing the clicked element to the function which is a single element rather than an array of elements.

Answer 4

Try following code:

function stepping(self) {
    var step = $("[class*='wiki-step-']");
    $(self).closest(step).hide().next(step).show();
}

$("a.button").on("click",function(){
    stepping(this);
});

Answer 5

First, you get the current step, who is visible, then check if there is a step after that one, then show it if it exists, and hide the current one.

  function stepping() { //var stepButton = $("a.button"); var currentStep = $("[class^='wiki-step-']:visible") ; var nextStep = $(currentStep).next("[class^='wiki-step-']"); if(nextStep.length>0){ currentStep.hide(); nextStep.show(); } //var step = $("[class*='wiki-step-']"); //stepButton.closest(step).hide().next(step).show(); } $("a.button").on("click",function(){ stepping(); }); 

 div[class*="wiki-step-"] { display: none; width: 500px; height: 500px; border:1px solid red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wiki-step-1" style="display:block"> <h1>step 1</h1> <a href="#" class="button">next</a> </div> <div class="wiki-step-2"> <h1>step 2</h1> <a href="#" class="button">next</a> </div> <div class="wiki-step-3"> <h1>step 3</h1> </div> 

Answer 6

I've slightly modified your HTML & CSS, as I believe a data attribute works well for this type of stuff.

Also I've just used a brute force, hide everything, and then show the page you require. I often find this approach leads to less errors, in a way it's like how React works as the view becomes a state. As such to make this have a prior stage would require very little modification.

 function stepping() { var nextStep = ($(this).closest('[data-step]'). attr('data-step')|0) + 1; $('[data-step]').addClass('hidden'); $('[data-step=' + nextStep+']').removeClass('hidden'); } $("a.button").on("click",stepping); 

 [data-step] { width: 500px; height: 500px; border:1px solid red; } .hidden { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div data-step="1"> <h1>step 1</h1> <a href="#" class="button">next</a> </div> <div data-step="2" class="hidden"> <h1>step 2</h1> <a href="#" class="button">next</a> </div> <div data-step="3" class="hidden"> <h1>step 3</h1> </div>