[revvo]

Изучаю сейчас jQuery, пробую сделать аккордион, базовый функционал работает, но хочу сделать чтобы айтемы тянулись по высоте как мне надо, а не только от высоты контента зависели. Никак не получается высоту объекту поменять, соседним можно, а вот по тому к-рому был клик, ну никак, все уже перепробовал. Посмотрите еще вы пожалуйста, может подскажете чего...

$(document).ready(function() {	
		
			//console.log();
			
			$(".i-head").click(function () {
			
				var obj = $(this).next();
				obj.slideToggle();
				obj.toggleClass('expanded', obj.height() == 1);
				
				var h = $("#accord").height();
				var h1 = $("#accord .i-body:first").height();
				h = h - h1 - 4*20;
				
				var i = 0;
				
				$("#accord .i-body").each(function() {
					if ($(this).hasClass('expanded')) i++;
				});
				
				// получаю высоту на к-рую тянуть все айтемы, поровну на всех пространство делится
				h = Math.floor(h / i);
				
				/*
				до этого момента все правильно, все проверил через логи, все объекты получаются,
				и все переменные содержат нужные значения
				*/
				
				$(".expanded").css("height", h); 
				// не работает, вообще никакой реакции
				//(вернее меняет высоту всем, кроме текущего, как я убедился ниже)
				
				//$(".i-body:eq(1)").css("height", h); // и даже так не работает,
				//НО работает на других пунктах, т.е. если мы сейчас кликнули 1-й, а менять будем 2-му то все получится
				
				//obj.css("height", h); // так тоже не работает
				
				// еще одна попытка, думал может дело в slideToggle, попробовал проанимировать, тоже безрезультатно
				//obj.css('display', 'block');
				//obj.animate({height: h}, 1500);
				
			});
			
			$(".i-body").click(function () {
				$(this).css("height", 200);
				// что интересно, тут работает, но мне нужно чтобы работало в функции выше, 
				// т.е. по клику хедера, а не тела
			});
		});

<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"></div>
			</div>
			<div class="i-body">
				<div style="padding:20px;color:blue;background:#EABF9A;">
					CONTENT of Item 1
				</div>
			</div>
		</div>
		
		<div class="acc-item">
			<div class="i-head">
				<span class="i-title">Item 2</span><div class="i-arrow"></div>
			</div>
			<div class="i-body" style="display:none;">
				<div style="padding:20px;color:blue;background:#EACF5A;">
					CONTENT of Item 2 Line 0<br/>
					CONTENT of Item 2 Line 1<br/>
					CONTENT of Item 2 Line 2<br/>
				</div>
			</div>
		</div>
		
		<div class="acc-item">
			<div class="i-head">
				<span class="i-title">Item 3</span><div class="i-arrow"></div>
			</div>
			<div class="i-body" style="display:none;">
				<div style="padding:20px;color:blue;background:#EABF9A;">
					CONTENT of Item 3 Line 0<br/>
					CONTENT of Item 3 Line 1<br/>
					CONTENT of Item 3 Line 2<br/>
					CONTENT of Item 3 Line 3<br/>
					CONTENT of Item 3 Line 4<br/>
					CONTENT of Item 3 Line 5<br/>
					CONTENT of Item 3 Line 6<br/>
					CONTENT of Item 3 Line 7<br/>
				</div>
			</div>
		</div>
		
		<div class="acc-item">
			<div class="i-head">
				<span class="i-title">Item 4</span><div class="i-arrow"></div>
			</div>
			<div class="i-body" style="display:none;">
				<div style="padding:20px;color:blue;background:#EACF5A;">
					CONTENT of Item 3 Line 0<br/>
					CONTENT of Item 3 Line 1<br/>
					CONTENT of Item 3 Line 2<br/>
					CONTENT of Item 3 Line 3<br/>
					CONTENT of Item 3 Line 4<br/>
					CONTENT of Item 3 Line 5<br/>
					CONTENT of Item 3 Line 6<br/>
					CONTENT of Item 3 Line 7<br/>
				</div>
			</div>
		</div>
		
	</div>

</div> <!-- END container -->