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: / 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=".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>

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/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./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>

• javascript
• html
• jquery
• jquery-selectors
• jquery-traversing

Share Follow edited May 24, 2023 at 18:42 Jonas 129k103103 gold badges328328 silver badges405405 bronze badges asked Dec 15, 2016 at 10:35 valerio0999valerio0999 12.2k77 gold badges3232 silver badges5757 bronze badges

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 4

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

Could be pretty simple:

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

Demo: https://jsfiddle/vsomcag2/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./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.

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);
});

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./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>

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 bees 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./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>