Question

I am trying to make a stream of show / hide fields in a form with jQuery.

This is the form:

<form>
    <label for="onde" class="onde">
        <b>qua qua text</b>
        <textarea name="onde" id="onde"></textarea>
        <a class="next">Continue</a>
    </label>

    <label for="tentou">
        <b>bla bla text</b>
        <textarea name="tentou" id="tentou"></textarea>
        <a class="next">Continue</a>
    </label>

    <label for="quase">
        <b>yada yada text</b>
        <textarea name="quase" id="quase"></textarea>
    </label>

    <input type="submit" id="submit" value="Send">
</form>

So, when I click on a.next, I need to hide the label of which the anchor tag belongs and show the next tag.

The problem here is that actually I don’t know the labels names (not even the real number of labels in the form), for they will be dynamically generated.

The last task will be make the submit bottom show when the last label will be visible.

Till now this is what I got:

$('a.next').click(function(event) {
    $(this).fadeIn('slow');
    $(this).css('display','block');
});

But… I can’t go any longer…

Answer 1

This should do what you want..

$('a.next').click(function(event) {
    var label = $(this).closest('label');
    label.hide();
    label.nextAll('label:first').fadeIn('slow');
});

demo at http://jsfiddle.net/gaby/fhuU4/