jQuery "if" Statements

**Shammus** · 10-19-2010, 08:16 PM

Got a question involving some jQuery script I was putting together. I essentially have three elements each containing a background image that is set to 200px wide by default however if clicked, will grow to 300px.

Whenever you either click on one of the other two elements however, the other two shrink back to 200px. Also, if you click on the first element while it's open at 300px, it closes back to 200px so a toggle function is needed.

Here's what I have so far. Basically it works except a double click is required to reopen an element that has already been closed. Anyone know how to get around this tiny issue? I'm thinking I have to embed some sort of an "if/then" function. Code is below, thanks for taking a look!

------------------------------------------

Code:

<div class="back22"><a href="#">adfs</a></div>

<br /><br />

<div class="back33"><a href="#">adfs</a></div>
<br /><br />

<div class="back44"><a href="#">adfs</a></div>

<script>

$(".back22").toggle(function() {
 $(".back22").animate({"width": "300px"}, "slow");
 $(".back33").animate({"width": "200px"}, "slow");
 $(".back44").animate({"width": "200px"}, "slow");
},
function() {
 $(".back22").animate({"width": "200px"}, "slow");	
});

$(".back33").toggle(function() {
 $(".back33").animate({"width": "300px"}, "slow");
 $(".back22").animate({"width": "200px"}, "slow");
 $(".back44").animate({"width": "200px"}, "slow");
},
function() {
 $(".back33").animate({"width": "200px"}, "slow");	
});



$(".back44").toggle(function() {
 $(".back44").animate({"width": "300px"}, "slow");
 $(".back22").animate({"width": "200px"}, "slow");
 $(".back33").animate({"width": "200px"}, "slow");
},
function() {
 $(".back44").animate({"width": "200px"}, "slow");	
});

	
</script>

**jscheuer1** · 10-20-2010, 08:56 AM

No. Toggle isn't what's required, at least not the way you've used it. If you use toggle like that it sets up a situation whereby each time the element is clicked it does the opposite of what it did the last time it was clicked. If you change it in a similar way by clicking somewhere else, that doesn't count as a toggle (click) on it. You could perhaps work it out using the .toggle() or .toggleClass() functions. But I think either would be unnecessarily complex.

Now, I'm not sure exactly what you're going for, but I think this fits what you describe:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style>
.back22 a, .back33 a, .back44 a {
	color: white;
}
.back22, .back33, .back44 {
	color: white;
	width: 200px;
}
.back22 {
	background-color: red;
	width: 300px;
}
.back33 {
	background-color: green;
}
.back44 {
	background-color: blue;
}
</style>
</head>
<body>
<div class="back22"><a href="#">adfs</a></div>

<br><br>

<div class="back33"><a href="#">adfs</a></div>
<br><br>

<div class="back44"><a href="#">adfs</a></div>

<script>
(function($){
	var theClasses = $('.back22, .back33, .back44').click(function(e){
		var cur = $(this), others = theClasses.not(cur);
		others.animate({width: (cur.css('width') === '300px'? 300 : 200)}, "slow");
		cur.animate({width: (cur.css('width') === '300px'? 200 : 300)}, "slow");
		e.preventDefault(); // remove if you want the links to fire
	});
})(jQuery);
</script>
</body>
</html>

**Shammus** · 10-20-2010, 02:33 PM

Hey, thanks for responding! I think that's very close. One thing is off. If you load the page you see all three elements on the screen. You click on the first element and it expands as it should. However, if you click on that same element again, it will contract, however the other two elements expand. The other two should only expand if they're clicked on directly however an element may be shrunk if one of the others is expanded....

Hope that makes sense, lol....thanks again for looking.

**jscheuer1** · 10-20-2010, 04:17 PM

Still not sure if I've got the requirements straight. When you say:

however an element may be shrunk if one of the others is expanded

I think you mean:

however an element should be shrunk if it's expanded and the one that just got clicked is becoming expanded.

If so:

Code:

(function($){
	var theClasses = $('.back22, .back33, .back44').click(function(e){
		var speed = 'slow', // set animation speed
		clicked = $(this), wB = clicked.css('width') === '200px';
		if(wB){
			theClasses.not(clicked).animate({width: 200}, speed);
		}
		clicked.animate({width: (wB? 300 : 200)}, speed);
		e.preventDefault(); // remove if you want the links to fire
	});
})(jQuery);

Notes:

The var name wB is short for width boolean - false unless (under the constraints of the script and styles) the clicked is to be expanded.

That does mean that the not(clicked) will be contracted if and only if clicked is to be expanded. If any not(clicked) are already contracted, this results in no change to that/those one(s).

We could do a test to determine that so as to avoid animating an element to its existing width. But unless doing it the way the above code does it presents some problem(s), the code to avoid that would be more complex and probably require more processing time to execute.

**Shammus** · 10-20-2010, 04:50 PM

Hey John, that was it....it works perfectly now. I was sort of thinking there had to be an "if" statement in there somewhere and wasn't sure how to write that in with jQuery.

Sorry for my poor wording. Yes, an element should be shrunk if it's expanded and the one that just got clicked is becoming expanded.

Thanks again!

Thread: jQuery "if" Statements

Thread Tools

Search Thread

jQuery "if" Statements

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions