Stop running code JQuery

JavaScript
1

Hi there,

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

<body>
	
	<section id="bio">
		
	<h2>Who’s 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:



$(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 I´m using it wrong.

Any tips on how to get that?

Thx a million in advance.

2

In cases like this, it’s better not to undo the damage, but to not let the damage occur in the first place.
In this case that means not toggling the div that’s related to the h3.

That can be done by removing the if/else statement, and then removing from the initial selection div that’s related to the selected h3 element. That stops the div from being hidden with all of the others. Then finally, we only want the next div to be toggled to show if it’s already currently hidden.

Due to the click event being bound to the h3 element, that means that the this keyword will refer to the clicked h3 element, so we should be able to remove any reference to the h3’s div with something like this:


$('#bio > div:visible').not($(this).next('div')).slideToggle(200);
$(this).next('div:hidden').slideToggle(550);

Which can also be reformatted as:


$('#bio > div:visible')
    .not($(this).next('div'))
    .slideToggle(200);
$(this).next('div:hidden').slideToggle(550);
3

Perfect. Here is the complete final JQuery chunk:


$(document).ready(function(){

		$('#bio > div').hide();
		$('#bio > div:first').show();
		
		$('#bio h3').click(function() {			
			$('#bio > div:visible').not($(this).next('div')).slideToggle(200);
			$(this).next('div:hidden').slideToggle(550);
			});

});

I guess I wasn’t really able to properly address the right div using this, nor to tell (from a JQuery syntax point of view) visible from hidden even when I was already using :visible (which is definitely not right!! :rolleyes:).

Understood the way of using .not for such cases as this one. :slight_smile:

Sweet. Thx a lot Paul.