Expand and Collapse JQuery

by Nigam Shah

HTML

<div class="codecaption">Countries Assigned</div>
<br>
<div class="tree" style="padding:10px;border:1px solid #ccc;">
	<div>Country 1
		<div>State 1</div>
		<div>State 2
			<div>City 1</div>
			<div>City 2</div>
			<div>City 3</div>
		</div>
		<div>State 3</div>
	</div>
	<div>Country 2
		<div>State 1</div>
		<div>State 2
			<div>City 1</div>
			<div>City 2</div>
			<div>City 3</div>
		</div>
		<div>State 3</div>
	</div>
	<div>Country 3
		<div>State 1</div>
		<div>State 2
			<div>City 1</div>
			<div>City 2</div>
			<div>City 3</div>
		</div>
		<div>State 3</div>
	</div>
</div>

CSS

div.tree div {
 padding-left:16px;
}
div.tree div.parent div {
 display:none;
 cursor:default;
}
div.tree div.parent {
 cursor:pointer !important;
 background:transparent url(http://www.javascripttoolbox.com/jquery/plus.gif) no-repeat top left;
}
div.tree div.expanded {
 background:transparent url(http://www.javascripttoolbox.com/jquery/minus.gif) no-repeat top left;
}

JavaScript

$(function() {
	$('div.tree div:has(div)').addClass('parent'); // Requires jQuery 1.2!
	$('div.tree div').click(function() {
		var o = $(this);
		o.children('div').toggle();
		o.filter('.parent').toggleClass('expanded');
		return false;
	});
});