how to rotate content in a div?

Question

I have a div which sits on the left hand side of the page, it has another div with content that fills the div,what i want to do is swap the inside div, with another div filled with different content after 10 seconds. and again after 10 seconds rotate back to the first div and so on..

on my main page i had php include of 'left_box.php'.. on that page the code looks like

<div class="span3 main_div">

<!-- first div -->
  <div class="well sidebar-nav transfer-central">
    <?php include 'includes/transfer_central.php'; ?>
  </div>

<!-- second div -->
  <div class="well sidebar-nav fixture-results">
    <?php //include 'includes/fixture-results.php'; ?>
  </div>

</div>

i have put both divs(includes) which i want to appear in the main div but currently only the first div appears.. but how after 10 seconds do i get the second div to replace the first div, inside the main div?

I looked around and just cant seem to get my head around it

Answer 1

JSFiddle: http://jsfiddle.net/Arj2C/

HTML:

<div id="outerdiv">
    <div class="" id="1">
        <!--content-->
    </div>
    <div class="hidden" id="2">
        <!--content-->
    </div>
    <div class="hidden" id="3">
        <!--content-->
    </div>
    <div class="hidden" id="4">
        <!--content-->
    </div>
</div>

JS (with jquery):

var next = 2;
$(function(){
    setInterval(function(){
        if(next == 1) $("#4").toggleClass("hidden");
       $("#" + (next-1)).toggleClass("hidden");
       if(++next == 5) {
           //$("#4").toggleClass("hidden");
           $("#" + (next-1)).toggleClass("hidden");
           next = 1;
       } else $("#" + (next-1)).toggleClass("hidden");
    }, 10000);
});

CSS:

.hidden {
    display: none;
}