I have articles in a group of divs <div class="art"> <div id="leftMain"><img src="media/img/greenBar.png" width="11" height="211"/></div> <div id="rightMain"> <span class="postedDate">POSTED: 15 MARCH 2008 1400 HOURS</span> <div class="articleHeader"> > SNEAK PREVIEW OF <i>NO CHILD...</i></ div> <div class="articleContent"><p>Lorem ipsum dolor sit am</p></div> <div class="articleDownload">>> <a href="#">DOWNLOAD 10% DISCOUNT PASS</a></div> <div class="clearfix"></div> </div> <div class="art"> <div id="leftMain"><img src="media/img/greenBar.png" width="11" height="211"/></div> <div id="rightMain"> <span class="postedDate">POSTED: 15 MARCH 2008 1400 HOURS</span> <div class="articleHeader"> > SNEAK PREVIEW OF <i>NO CHILD...</i></ div> <div class="articleContent"><p>Lorem ipsum dolor sit amet, conat nulla facilisis.</p></div> <div class="articleDownload">>> <a href="#">DOWNLOAD 10% DISCOUNT PASS</a></div> <div class="clearfix"></div> </div>
I am trying to loop through each class and display them one at a time, article one will display and each class inside article one will show (using the show()) function one at a time. This will happen with each with each article one after another for as many articles as there are. This could be 2 this could be 10. I know this is not a convenient way to load a page but this is what i am trying to do. I am also using a typewriter unction to display letters one at a time. I have this right now var arrayList = $.makeArray($('.art').get()); $.each(arrayList,function() { $(this).show(); $('.postedDate').show().jTypeWriter({onComplete:function(){ $('.articleHeader').show().jTypeWriter({onComplete:function(){ $('.articleContent').show().jTypeWriter({onComplete:function() { }}); }}); }}); }); it doesnt quite get it right. Here is the sample page http://pavlishgroup.com/projects/cpt-test/ thanks in advance