как повернуть содержимое в div?

Question

У меня есть div, который находится на левой стороне страницы, у него есть еще один div с содержимым, заполняющим div, что я хочу сделать, это обмен внутри div, а другой div, заполненный различным содержимым через 10 секунд. и снова через 10 секунд повернуть назад в первый DIV и так далее ..

на моей главной странице я бы PHP включают в «left_box.php» .. на этой странице, код выглядит как

<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> 

Я поместил оба divs (включая), которые я хочу появиться в главном div, но в настоящее время появляется только первый div. но как через 10 секунд я получу второй div, чтобы заменить первый div, внутри основного div?

Я посмотрел вокруг и просто не могу показаться, чтобы получить мою голову вокруг него

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 (с 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; 
}