Hi,

I am currently working on a small project to improve my designing and programming all round.

At the moment I am having a problem implementing some JQuery to allow for text in a DIV to be faded in and out to reveal new DIV's.

I have some DIVs hidden with css using display:none and I want to use JQuery to constantly loop through fading in and out of these DIV's to reveal and hide their text.

I have managed to get it to fade from the first DIV to the second but I need to work out how to loop through all of them. I am familiar with loops etc but I am unsure how to implement it to work through only these DIV's

Thanks in advance for any help.

Here is my code so far:

Code HTML4Strict:
<div id="drinks">
 
	<h1>Drinks Prices</h1>
 
	<div class="drinks_content">
 
		<h2>Draught Pints</h2>
 
		<ul>
			<li>Becks Vier : 3.40</li>
			<li>Fursternberg : 3.40</li>
			<li>Guinness : 3.40</li>
			<li>Best : 3.20</li>
			<li>Strongbow : 3.20</li>
		</ul>
 
	</div>
 
	<div class="hidden">
 
		<h2>Wines &amp; Spirits</h2>
 
		<ul>
			<li>Vodka + Mix: 1.70</li>
			<li>Whisky + Mix: 1.70</li>
			<li>Rum + Mix: 2.00</li>
			<li>Single Malt Whisky: 2.40</li>
			<li>Small Glass of Wine: 2.00</li>
			<li>Large Glass of Wine: 2.50</li>
		</ul>
 
	</div>
 
	<div class="hidden">
 
		<h2>Bottled Beer</h2>
 
		<ul>
			<li>Miller: 1.70</li>
			<li>Budweiser: 1.70</li>
			<li>Estrella Damm: 2.00</li>
			<li>Becks: 2.40</li>
			<li>Corona: 2.00</li>
			<li>Desperados: 2.50</li>
			<li>Red Stripe: 2.50</li>
			<li class="other">Rekorderlig: 3.20</li>
		</ul>
 
	</div>
 
	<div class="hidden">
 
		<h2>Promo's</h2>
 
		<ul>
			<li class="promo">Estrella Damm: 2.20</li>
		</ul>
 
	</div>
 
	<h2 class="column_footer">ALL Shots 2!</h2>
 
</div><!--Drinks end DIV-->

Code JavaScript:
$(document).ready(function() {
 
$('.drinks_content').fadeOut(5000, function() {
    $(this).removeClass('drinks_content');
    $(this).addClass('hidden');
    $(this).next().fadeIn(5000).removeClass('hidden').addClass('drinks_content');
});
 
});