Question

I’ve recently started learning jQuery and I think I’m in love 🙂

Here’s what I am trying to do…

Hide all li input fields except the first one.
Have a button below the first input field that reveals the 2nd input field when clicked.
The button must move below the newly revealed input field.

When clicked again it must repeat the above until there aren’t any more input fields.

I have tried a few ideas, the latest one is here. I know it’s wrong, I am really stumped on this one, any help is greatly appreciated.

Here is my temporary solution under “Show extra Refill Fields”.

Answer 1

I have simplified your markup just for readability
See the working example here..

    <input type="text" /> 
    <input class="hide" /> 
    <input class="hide" /> 
    <input class="hide" /> 
    <input class="hide" /> 
<br /><button id="refill">Refill Another</button>
<style>
 .hide{
    display:none;
    visibility:collapse;
 }
 input{
    display:block;
    clear:both;
 }    
</style>

And a tiny bit of jQuery.. 🙂

$(document).ready(function() {
    $('#refill').click(function(){
        $('input').not(':visible').first().removeClass('hide');
        //thats all you need!
    });    
});