jQuery Toggel Close all

Robert Granlund used Ask the Experts™

on 2015-09-23

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?

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

jQuery Toggel Close all

Premium Content

Premium Content

Explore our Suite of Services