Изучаю сейчас 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 -->
