Divs don't toggle

I have following divs on my page

 <div id="rpttimeline">div 1</div>
 <div id="rptareaview">div 2</div>
 <div id="rptgalleria">div 3</div>
 <div id="rptremainingwork">div 4</div>
 <div id="rptremainingspec">div 5</div>
 <div id="rptremainingreq">div 6</div>
 <div id="rptremaininguserstory">div 7</div>

Initially through css I have the first two divs set to visible and the remaining are hidden.

in my document ready function I have

$(document).ready(function () {
           window.setInterval(toggleDivs, 500开发者_JS百科0);
        });

function toggleDivs() {

            $('#rpttimeline').toggle();
            $('#rptareaview').toggle();
            $('#rptgalleria').toggle();
            $('#rptremainingwork').toggle();
            $('#rptremainingspec').toggle();
            $('#rptremainingreq').toggle();
            $('#rptremaininguserstory').toggle();
}

when toggledivs is called the first two divs get hidden but the other divs are not visible. It seems the toggle is affecting just the first two divs. Am I missing something here?

when toggledivs is called the first two divs get hidden but the other divs are not visible. It seems the toggle is affecting just the first two divs. Am I missing something here?

Well, I think jquery is toggling fine. You have first two divs visible but when toggle is called, they both get hidden and you have other divs shown initially on and when toggle is called they become hidden.

Tip: Try to hide or show with jquery in ready handler for example so that jquery remembers their initial display settings.