How to unhide multiple inputs using jquery.

Question

Hi,

I have form where user can choose to enter more than one option. I currently show one input field and hide the remaining 4 input fields for that option.

Previously, I used link under each input to unhide the next input and link.

$(function(){ 
    $(".show").click(function () {
        $(this).parent().next("div").show();
        evenpreventDefault();
    });
});

But I want to use only one link to unhide the hidden inputs one by one(first click = first hidden input, second click = second input..so on.).

Is this possible in jquery, I appreciate any help.

Answer 1

I think you wanted to show 1 by 1, so the solution is this:

Working demo

HTML

<div id="wrapper">
    <div>  
            <a href="#" class="show">Show</a>
    </div>
      <div class="test" id="1"><input type="text" value="1"/></div>
      <div class="test" id="2"><input type="text" value="1"/></div>
      <div class="test" id="3"><input type="text" value="1"/></div>
      <div class="test" id="4"><input type="text" value="1"/></div>
</div>

JQUERY

$(".test").hide();
    $(".show").click(function () {       

        $(this).parent().siblings("div:not(:visible)").first().show();
        evenpreventDefault();
    });

The show link and the hidden links must have the same parent, so to be in the same level of structure, you ask for the siblings that are visible, but only the first one, and then you show it.