Show content one after the other

Question

I have two controls

<div id="div1" class="ddd">
For US
</div>
<div id="div2" class="ddd">
For UK
</div>

I want to show the div 1 content for 3 seconds and then show div 2 contents for 3 seconds and keep repeating this behaviour. Can this be done without using any otehr plugin. There could be more than 2 controls.

Answer 1

$(function(){
    $(".ddd").each(function(){
        setTimeout(function(){ $(this).show(); },3000);
    });
});

This is assuming they all share the common ddd class, but it should work.

Answer 2

Something like this should work (assuming divs are numbered starting from 1):

var numControls = 2;
var currentControl = 1;

// Hide all but the first to start with
for (var i = 2; i <= numControls; i++)
    $('#div' + i).hide();

setInterval(function()
{
    // Hide the old one
    $('#div' + currentControl).hide();

    // Go to the next one
    currentControl++;

    if (currentControl > numControls)
        currentControl = 1;

    // and show it
    $('#div' + currentControl).show();
}, 3000);