CODEWITHSUNDEEP
javascriptjquery
Peter
Peter

Reputation: 447

How to make more than one div appear using jQuery

I feel I am very close to finishing this. I have a form with an "Add Children" button that when pressed will make a div show. The form has 15 divs hidden (#child1 - #child15). I have it working to show only the first row (#child1).

My problem is that when the button is pressed again, the next row (#child2, #child3, etc...) should appear and I am not sure how to get it to show. I tried putting in the counter but I am new to jQuery and any help would be very much appreciated. I don't expect this to be a difficult issue, just one that is eluding my novice ability.

Here is the jQuery. If i need to edit or add more code to help the question please let me know. Thanks in advance!

<script type="text/javascript">
var counter=0

$(document).ready(function() {
    $('#addChildren').click(function() {
        $('#child1').show(function() {
        counter++
        });
      });
    });
</script>

Upvotes: 0

Views: 202

Answers (6)

iappwebdev
iappwebdev

Reputation: 5910

Add a class children-to-show to your divs #child1 - #child15 and write

<script type="text/javascript">
$(document).ready(function() {
    $('#addChildren').click(function() {
        $('.children-to-show:hidden').first().show();
    });
</script>

This way you dont't need a counter and the div id doesnt't have to be in a row, so you have more ways to configure your div ids.

Explanation

On every click on addChildren, the next hidden element with class children-to-show is shown.

EDIT

gdoron is right, so if you want to get it work with classes:

<script type="text/javascript">
$(document).ready(function() {
    $('#addChildren').click(function() {
        $('.children-to-show').not('.is-visible').first().show().addClass('is-visible');
    });
</script>

Upvotes: 5

sachleen
sachleen

Reputation: 31141

You need to make the div you're showing a variable like $('#child' + counter) so it will show a different div as the values of counter get updated.

var counter=1

$(document).ready(function() {
    $('#addChildren').click(function() {
        $('#child' + counter).show(function() {
            counter++
        });
    });
});

I've put together this demo to show you.

Upvotes: 1

Hunter McMillen
Hunter McMillen

Reputation: 61550

You could just concatenate the counter variable into the jQuery selector:

<script type="text/javascript">
var counter=0

$(document).ready(function() {
    $('#addChildren').click(function() {
        $('#child' + counter).show(function() {
        counter++
        });
      });
    });
</script>

Upvotes: 1

Ayush Chaudhary
Ayush Chaudhary

Reputation: 716

This should do it for you

<script type="text/javascript">
var counter=1

$(document).ready(function() {
    $('#addChildren').click(function() {
        $('#child' + counter).show(function() {
        counter++
        });
      });
    });
</script>

You can add a condition to check the limit of 15 as well. Something like .. 

    <script type="text/javascript">
        var counter=1

        $(document).ready(function() {
            $('#addChildren').click(function() {
                if(counter <= 15) {
$('#child' + counter).show(function() {
                counter++
                });
}
              });
            });
        </script>

Upvotes: 1

gdoron
gdoron

Reputation: 150313

If the <div>s are in order 1,2,3,4...15:

$('#addChildren').click(function() {        
        $('div[id^="child"]').eq(counter).show();
        counter++;
});

If they are not in order:

$('#addChildren').click(function() {        
        $('#child' + (++counter)).show();
});

Upvotes: 2

COLD TOLD
COLD TOLD

Reputation: 13599

you can just use for loop if you know exact amount of divs

$(document).ready(function() {
    $('#addChildren').click(function() {

for (i=1; i<=15; i++)
  {
  $('#child'+i).show();
  }

   });
});

Upvotes: 1

Related Questions