Question

An example use case would be a registration form that was split into several steps. I.e. there are three steps:

• Container 1 is visible
• Container 2 is hidden
• Container 3 is hidden

User clicks next button:

• Container 1 is hidden
• Container 2 is visible
• Container 3 is hidden

User clicks next button:

• Container 1 is hidden
• Container 2 is hidden
• Container 3 is visible

User clicks previous button:

• Container 1 is hidden
• Container 2 is visible
• Container 3 is hidden

and so on. This is what I tried:

$('#btn-next-step').live('click', function(){
    $('.form-step').each(function(){
        if($(this).is(':visible')){
            $(this).hide();
        }else{
            $(this).show();
            return false;
        }
    });
});

HTML:

<form>
    <div class="container-fluid form-step form-step1">
        step1
    </div>
    <div class="container-fluid form-step form-step2">
        step2
    </div>
    <div class="container-fluid form-step form-step3">
        step3   
    </div>
</form>

Here is my fiddle: http://jsfiddle.net/feFcu/

Can you help me with the logic. Any ideas how to realize this kind of behaviour?

Answer 1

First, store the visible one in a variable. Then hide all of them, and use .next('.form-step') to find the one that follows the previously visible one, and .show() it.

$('#step').on('click', function(){
    // Find the visible one and store in a variable
    var showing = $('.form-step:visible');
    // Hide all of them (including the currently visible one)
    $('.form-step').hide();
    // Find the next one with .next() and make it visible
    showing.next('.form-step').show();            
 });​

Here is the updated jsfiddle example…

Note that I have replaced .live() with .on(), since .live() is now deprecated.