JQuery / Javascript Show Hide multiple Content using one button?

Question

I got a requirement like this,

<p id="admore">Add More</p>
<span id="qulification1">
       Qulification 1<input type="text" name="qulification[]"/>
</span>
<br/>
<span id="qulification2" style="display: none">
    Qulification 2<input type="text" name="qulification[]"/>
    <span id="remove2">remove</span>
</span>
<br/>
<span id="qulification3" style="display: none">
    Qulification 3 <input type="text" name="qulification[]"/>
    <span id="remove3">remove</span>
</span>

qulification2 and qulification3 span default keep hide, when click one time on "Add More" btn, it shows qulification2. next click shows qulification3. How to do it?

I have done it using two Add More button. but it is not good way,

<p id="admore2">Add More</p>
<p id="admore3">Add More</p>

$('#addmore2').click(function() {
    $('#qulification2').show();
});

$('#addmore3').click(function() {
    $('#qulification3').show();
});

Answer 1

The easiest way to do this is with class selectors, this way on each click one more appears of those spans:

css: .invisible { display: none; } .invisible { display: none; }

html: on every span, should be an extra class for grouping and another for invisibility:

<span id="qulification1" class="q invisible">

js:

$('#addmore').click( function() { $('span.q.invisible').first().removeClass('invisible'); } );

Answer 2

You can just do :

var counter = 0;

$('#addmore2').click(function() {
    if (count === 0) {
        $('#qulification2').show();
    } else if (count == 1) {
        $('#qulification3').show();
    }
    count++;
});

Answer 3

Of course there are many way to solve the problem you are encountering. About the most simple way to solve this issue is to add a counter to your program which will count how many times you have pressed the button. If you want to only be able to show the content and not hide it again, you can use the following code:

var count = 0;

$('#addmore2').click(function() {
    if (count == 0) {
        $('#qulification2').show();
    }
    else if (count == 1) {
        $('#qulification3').show();
    }
    count++;
});

However, there may be a better approach to your problem. If you wish to be able to show the content and then be able to hide it once it is all on the screen, you can use the following code:

var count = 1;

$('#addmore2').click(function() {
    if (count == 1) {
        $('#qulification2').show();
    }
    else if (count == 2) {
        $('#qulification3').show();
    }
    else if (count == 3) {
        $('#qulification2').hide();
        $('#qulification3').hide();
        count = 0;
    }
    count++;
});

Answer 4

Check the visibility of the spans and show the first one hidden:

$('#addmore').click(function() {
    if ( $('#qulification2').css('display') == 'none' )                                     
          $('#qulification2').show();
   else if ( $('#qulification3').css('display') == 'none' )                                     
          $('#qulification3').show();});
}) ;

Answer 5

What you really should do is pragmatically insert another node after user click "Add" button.

Give your whole thing a container, just append to it. For example,

 $("#AddButton").click(
function()
{
$("#Container").append("<span>your item stuff</span>");
}

);