jQuery Toggel Close all

Robert Granlund
Robert Granlund used Ask the Experts™
on
I have this jQuery function that toggles open divs when a certain class is clicked:
<script>
jQuery(document).ready(function() {
	jQuery('.laser-nav-display').click(function() {
		jQuery('.nav-lasers').slideToggle("slow", function() {
			
		});
	});
	jQuery('.app-nav-display').click(function() {
		jQuery('.nav-applications').slideToggle("slow", function() {
			
		});
	});
	jQuery('.support-nav-display').click(function() {
		jQuery('.nav-support').slideToggle("slow", function() {
			
		});
	});
	jQuery('.company-nav-display').click(function() {
		jQuery('.nav-company').slideToggle("slow", function() {
			});
		});
	jQuery('.accept').click(function() {
		jQuery('.agreement').show("slow", function() {
			
		});
	});
});
</script>

Open in new window

However, when I click on one, I want the others to close instead oe.staing open. So there is only one open at a time.  How do I go about this?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2013
Commented:
Just add slideUp() for other divs. I do not know what your divs have in common (like a name or class or something) so I do not know how to access to them as a collection. Therefore my code looks messy:
<script>
jQuery(document).ready(function() {
	jQuery('.laser-nav-display').click(function() {
		jQuery('.nav-applications').slideUp("slow");
		jQuery('.nav-support').slideUp("slow");
		jQuery('.nav-company').slideUp("slow");
		jQuery('.agreement').slideUp("slow");
		jQuery('.nav-lasers').slideToggle("slow");
	});
	jQuery('.app-nav-display').click(function() {
		jQuery('.nav-lasers').slideUp("slow");
		jQuery('.nav-support').slideUp("slow");
		jQuery('.nav-company').slideUp("slow");
		jQuery('.agreement').slideUp("slow");
		jQuery('.nav-applications').slideToggle("slow");
	});
	jQuery('.support-nav-display').click(function() {
		jQuery('.nav-lasers').slideUp("slow");
		jQuery('.nav-applications').slideUp("slow");
		jQuery('.nav-company').slideUp("slow");
		jQuery('.agreement').slideUp("slow");
		jQuery('.nav-support').slideToggle("slow");
	});
	jQuery('.company-nav-display').click(function() {
		jQuery('.nav-lasers').slideUp("slow");
		jQuery('.nav-applications').slideUp("slow");
		jQuery('.nav-support').slideUp("slow");
		jQuery('.agreement').slideUp("slow");
		jQuery('.nav-company').slideToggle("slow");
	});
	jQuery('.accept').click(function() {
		jQuery('.nav-lasers').slideUp("slow");
		jQuery('.nav-applications').slideUp("slow");
		jQuery('.nav-support').slideUp("slow");
		jQuery('.nav-company').slideUp("slow");
		jQuery('.agreement').slideToggle("slow");
	});
});
</script>

Open in new window

BTW, you do not need to use the function(){} for your slideToggle() if the function is empty. If you have a common attribute for your divs, eg all of them have a "toggling" class then you can just write this:
		jQuery('.toggling').slideUp("slow");

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial