How to display ONE div at random

Question

Below is code written by another user on here to show/hide a div with a random delay between 4- 8 seconds

<script>
    function showCity() {

      $('#city-middle').show();
      window.setTimeout( hideCity, 10 );
    }

    function hideCity() {
      $('#city-middle').fadeOut(200);
      window.setTimeout( showCity, 3000 + (Math.random() * 5000) );
    }

    hideCity();
</script>

So the DIV #city-middle (that appears & fades out) has a child div called #bolt-container that obviously appears & fades out with that div. Within this bolt-container are 4 child divs named bolt-1 to bolt-4. Each one of those divs has is positioned in different places.

<div id="city-middle">

    <div id="bolt-container">
        <div class="bolt-1">
        </div>
        <div class="bolt-2">
        </div>
        <div class="bolt-3">
        </div>
        <div class="bolt-4">
        </div>
    </div>
</div>

What I need is for the #bolt-1 - #bolt-4 divs to appear at random ONE AT A TIME with no animation.

So far I've googled this and found only one jsfiddle which would possibly help - http://jsfiddle.net/tricinel/FgXDC/

I've tried implementing as below with no luck.

    function showCity() {
      $('#city-middle').show();
      window.setTimeout( hideCity, 10 );
    }

    function hideCity() {
      $('#city-middle').fadeOut(200);
      window.setTimeout( showCity, 3000 + (Math.random() * 5000) );
    }

    hideCity();


    var divs = $('#bolt-container').find('.div'),
    len = divs.length,
    randomDiv,
    speed = 1000;

var interval = setInterval(
                function() { 
                        randomDiv = Math.floor(Math.random()*len);
                        divs.removeClass('show');
                        divs.eq(randomDiv).addClass('show');                         
                } , speed);

I know there is something wrong with how I have it laid out, but as a beginner, I have no idea where to even look! Could it be that I am not closing off the first jQuery thing correctly? Or not setting some form of function for the second one?

Answer 1

To adapt the fiddle you posted, all you had to do is use:

var divs = $('#bolt-container').find('div'), //fetch all the divs

Notice that var divs = $('#bolt-container').find('.div') fetches all elements with the div class(!) that were descendant of the element with id #bolt-container. In your example, you do not want that, you want to fetch all the <div> below such element. That's what the adapted code above does.

And don't forget the CSS (will also be applied to all <div> below #bolt-container):

#bolt-container div {
    display:none;
}

Check it working here.

Answer 2

I would follow the already given suggestions (by @acdcjunior):

var divs = $('#bolt-container').find('div');

and:

#bolt-container div {
    display:none;
}

but I would also put all the code (excluding the function definitions) between:

$(document).ready(function() {
    // Put your code here.
});

To make sure your document is loaded before working with its objects.