JQuery: How to show/hide a series of form labels onde after another

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>
  开发者_StackOverflow      <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...

---

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/

---

Just give a common class to your text areas. Suppose we have given class 'ta' Now here is the code

EDIT:
$(document).ready(function(){
    var i=0;
    $(".next").click(function(){
        $("label:eq("+i+")").fadeOut(200);
        i++;
        $("label:eq("+i+")").fadeIn(200);
    });
});

This is the jquery code you need. JS fiddle This is the working fiddle you need.