Hi there,

Going through JQUERY, NOVICE TO NINJA book I ended up trying a simple accordion sample. Here is the HTML:

Code:
<body>
	
	<section id="bio">
		
	<h2>Whos Hot Right Now?</h2>
		
		<h3>Beau Dandy</h3>
			<div>
			<img src="imges/rock2.jpg" alt="Beau Dandy"/>
			<p>Content about Beau Dandy</p>			
			</div>
			
		<h3>Johnny Stardust</h3>
			<div>
			<img src="imges/rock2.jpg" alt="Johnny Stardust"/>
			<p>Content about Johnny Stardust</p>
			</div>
			
		<h3>Glenda tronix</h3>
			<div>
			<img src="imges/rock2.jpg" alt="Glendatronix"/>
			<p>Content about Glendatronix</p>
			</div>
			
	</section>
    
    	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript" src="query-test.js"></script>               
    </body>
and here is the jquery:

Code javascript:
 
$(document).ready(function(){
 
		$('#bio > div').hide();
		$('#bio > div:first').show();
 
		$('#bio h3').click(function() {
			$('#bio > div:visible').slideToggle(200);
			if ($(this).next('div').is(':visible')){
 
                        - what would go here? -
 
			}
			else
			{			
			$(this).next('div').slideToggle(550);	
			}
			});
});

The if... else... statement wasn't there at first. It wasn't really difficult to make the accordion work, that is, whenever you click on an <h3>, its <div> child shows up (slideToggle) if it's hidden, and any other <div>, child to other <h3>'s, hides away (slideToggle) if it is visible.

The thing is when you clicked on the <h3> whose <div> child was visible, the slideToggle animation (hiding first and showing back again) took place for that <div> too. So I thought I could come up with an if statement so that if a <div> is visible, when you click on its parent <h3>, jquery stops running and no animation takes place. But I don't really know how to make that happen, what the jquery standard for that is. .stop() is not working... or else Im using it wrong.

Any tips on how to get that?

Thx a million in advance.