[revvo]

Все правильно, работает. Но я хочу чтобы высота равномерно делилась между элементами, а не по высоте своего контента они были. Для этого и пытался задать высоту в событии клика. Но я уже решил проблему. (будете смеяться, но я уже забыл в чем она была, полчаса времени прошло))))

Спасибо за попытку помочь

Вот вариант работающий как мне надо (может пригодится кому, тут я еще добавил смену иконки (arrow-exp/arrow-clp))

$(".i-head").click(function () {
			
				var obj = $(this).next();
				
				obj.toggleClass('expanded');
				
				$(this).children('.i-arrow').toggleClass('arrow-exp');
				$(this).children('.i-arrow').toggleClass('arrow-clp');
				
				var h = $("#accord").height();
				var h1 = $("#accord .i-body:first").height();
				h = h - h1 - 4*22;
				
				var i = 0;
				
				$("#accord .i-body").each(function() {
					if ($(this).hasClass('expanded')) i++;
				});
				
				h = Math.floor(h / i);
				
				$("#accord .i-body").each(function() {
					if ( (!$(this).hasClass('expanded')) && (!$(this).hasClass('i-first')) ) {
						$(this).animate({height: 0}, 500);
					}
				});
				
				$(".expanded").animate({height: h}, 500);	
				
			});

В HTML коде тоже есть небольшие изменения

<div style="height:400px;">

	<!-- Accordion -->

	<div class="acc-container" id="accord">
	
		<div class="acc-item">
			<div class="i-head">
				<span class="i-title">Item 1</span><div class="i-arrow arrow-exp"></div>
			</div>
			<div class="i-body i-first">
				<div style="padding:20px;">
					Item 1 content
				</div>
			</div>
		</div>
		
		<div class="acc-item">
			<div class="i-head">
				<span class="i-title">Item 2</span><div class="i-arrow arrow-clp"></div>
			</div>
			<div class="i-body" style="height:0px;">
				<div style="padding:20px;">
					Item 2 content<br/>
					Item 2 content<br/>
					Item 2 content<br/>
					Item 2 content<br/>
					Item 2 content<br/>
					Item 2 content<br/>
					Item 2 content<br/>
					Item 2 content<br/>
				</div>
			</div>
		</div>
		
		<div class="acc-item">
			<div class="i-head">
				<span class="i-title">Item 3</span><div class="i-arrow arrow-clp"></div>
			</div>
			<div class="i-body" style="height:0px;">
				<div style="padding:20px;">
					Item 3 content<br/>
					Item 3 content<br/>
					Item 3 content<br/>
					Item 3 content<br/>
					Item 3 content<br/>
					Item 3 content<br/>
					Item 3 content<br/>
					Item 3 content<br/>
				</div>
			</div>
		</div>
		
		<div class="acc-item">
			<div class="i-head">
				<span class="i-title">Item 4</span><div class="i-arrow arrow-clp"></div>
			</div>
			<div class="i-body" style="height:0px;">
				<div style="padding:20px;">
					Item 4 content<br/>
					Item 4 content<br/>
					Item 4 content<br/>
					Item 4 content<br/>
					Item 4 content<br/>
					Item 4 content<br/>
					Item 4 content<br/>
					Item 4 content<br/>
				</div>
			</div>
		</div>
		
	</div>

</div>

Ну и для полноты картины, CSS

.acc-container {
	width: 300px;
	height: 100%;
	border: 1px solid black;
	overflow: hidden;
}

.i-head {
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	position: relative;
	background: url(../images/acc.png) repeat-x;
}

.i-title {
	font-weight: bold;
	padding: 0 8px;
}

.i-arrow {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 12px;
	height: 12px;
	cursor: pointer;
}

.arrow-exp { background: url(../images/minus.png) no-repeat; }

.arrow-clp { background: url(../images/plus.png) no-repeat; }

.i-body {
	overflow: auto;
	color: blue;
}

PS Если будете использовать этот код, первый элемент не работает как остальные, не пугайтесь, это мне так нужно просто было, он у меня должен быть фиксированный, поэтому я его не учитывал и не тестировал вообще.