Using JavaScript, how to make elements appear one by one

Question

How to make blocks appear one by one when I click a button? One click = one block appearing.

<div class="gallery">
    <div class="block">
        <div class="img"></div>
    </div>
    <div class="block">
        <div class="img"></div>
    </div>
    <div class="block">
        <div class="img"></div>
    </div>
    <div class="block">
        <div class="img"></div>
    </div>
</div>
<button id="btn"></button>

score 5 · Accepted Answer · answered Jun 18 '16 at 15:04

Below is a working example using jQuery (as mentioned in your tags). A couple things to note:

I made a CSS class called hidden and added to each block.
With jQuery, I created a click handler for he button that finds the first block with the hidden class and removes that class. This has the result of displaying that block.

Here is the complete code:

<!doctype html>
<html>
<head>
    <style>
        .hidden { display: none; }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
    <div class="gallery">
        <div class="block hidden">
            <div class="img"></div>
            first block
        </div>
        <div class="block hidden">
            <div class="img"></div>
            second block
        </div>
        <div class="block hidden">
            <div class="img"></div>
            third block
        </div>
        <div class="block hidden">
            <div class="img"></div>
            fourth block
        </div>
    </div>
    <button id="btn">Click me</button>

    <script>
        $(function () {
            $('#btn').click(function () {
                $('.gallery .hidden').first().removeClass('hidden');
            });
        });
    </script>
</body>
</html>

score 3 · Answer 2 · edited Jun 18 '16 at 15:14

using only js

var count = 0;
function i(){
 items = document.getElementsByClassName("block");
    if(count < items.length)
        items[count++].style.display = "block";
}

.block{
    display: none;
}

<div class="gallery">
     <div class="block">
           <div class="img">1</div>
     </div>
     <div class="block">
           <div class="img">2</div>
     </div>
     <div class="block">
     <div class="img">3</div>
           </div>
     <div class="block">
     <div class="img">4</div>
     </div>
</div>
<button id="btn" onclick="i()">appear one by one</button>

BotNet · Answer 3 · 2016-06-18T15:19:53.657

You could just show the first one not visible. For a little improvement, instead of looking up the visibility for each function call, we cache the list of hidden blocks ($blocks) at dom load.

At the end of the function the list of visible blocks is then updated (the one that was toggled on is displayed).

Note: this does not for dynamically added blocks that are added after the initial dom load, but the code could be easily updated for that.

$blocks = $('.block:not(:visible)');

function showBlock() {
  var $block = $blocks.first().css('display', 'block');
  $blocks = $blocks.not( $block );
}

.block {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="gallery">
  <div class="block">
    <div class="img"></div>
    one
  </div>
  <div class="block">
    <div class="img"></div>
    two
  </div>
  <div class="block">
    <div class="img"></div>
    three
  </div>
  <div class="block">
    <div class="img"></div>
    four
  </div>
</div>
<button id="btn" onclick="showBlock()">Show Block</button>

JSchirrmacher · Answer 4 · 2016-06-18T15:36:25.533

-1

First set all blocks invisible with css:

.block { display: none; }

Then, add a handler to the button and make the first non-visible visible:

$("#btn").on("click", function () {
   $(".gallery").find(".block:hidden").first().css({ display: "block"; });
});

edited Jun 18 '16 at 15:36

answered Jun 18 '16 at 15:05

JSchirrmacher

3,243
2
19
27

There is a couple of typos in your code (`:not(:visible)` and the extra `;` behind the css). But even if you were to change those, it still doesn't work. This will display them all at once. – putvande Jun 18 '16 at 15:09
it seems there are many ways to make it works but i couldn't find anyone :( I need practice more – dmitriy Jun 18 '16 at 15:25
Thanks, @putvande, I really missed the point of the *first* element which I only explained in my text, but not in the code. I corrected that. I also simplified the selector so it doesn't need the negation any more. For the semicolon in css, it's a matter of taste, see http://stackoverflow.com/questions/2406717/semicolon-in-css – JSchirrmacher Jun 18 '16 at 15:40

Using JavaScript, how to make elements appear one by one

4 Answers4