Ваша предпосылка ошибочна. Структура документа течет слева направо, сверху вниз. Вам нужно будет внести некоторые изменения в структуру ... Проще всего было бы добавить два контейнера для левого столбца и правого столбца. В противном случае вас ждет некоторая хитрая разметка абсолютного позиционирования и немного прикольный jquery, который я могу предложить, только добавив несколько уникальных идентификаторов для каждой из панелей.
Я бы лично добавил идентификаторы, такие как panel1 - panel4 для вашего примера, а затем использовал бы этот javascript (или аналогичный) в качестве отправной точки:
for(var i=1; i<=4; i++) {
$('#panel'+i).css('left', function(index) {
if(i%2 == 0) return "120px";
else return "0px";
});
}
$('.more').click(function(e) {
e.preventDefault();
$(this).parent().children('p').toggle();
var id = $(this).parent().attr("id");
switch( id ) {
case 'panel1':
console.log("panel1 found");
$('#panel3').css('top', function(index) {
var buffer = $('#'+id).height() + 20 + "px";
return buffer;
});
break;
case 'panel2':
$('#panel4').css('top', function(index) {
var buffer = $('#'+id).height() + 20 + "px";
return buffer;
});
break;
default: break;
}
});
Со значениями по умолчанию в CSS для этих панелей:
#panel1 { top:0px; }
#panel2 { top:0px; }
#panel3 { top:56px; }
#panel4 { top:56px; }
Чем меньше вы настраиваете html, тем больше работы вы будете создавать в javascript.
редактировать
Предлагаемый альтернативный Javascript для устранения необходимости изменять HTML, предполагая два элемента в строке. Поскольку мы знаем, что проблема в ряду ...
var ct = 1
$('#container > div').each(function(index, domEle) {
$(domEle).attr('id', 'panel'+ct);
$('#panel'+ct).css({
'position': 'absolute',
'left' : function(index, value) {
if(ct%2 == 0) return "120px";
else return "0px";
},
'top' : function(index, value) {
return (56 * Math.floor(ct/3)) + "px";
}
});
ct++;
});
$('.more').click(function(e) {
e.preventDefault();
$(this).parent().children('p').toggle();
var id = $(this).parent().attr("id");
switch( id ) {
case 'panel1':
$('#panel3').css('top', function(index) {
var buffer = $('#'+id).height() + 20 + "px";
return buffer;
});
break;
case 'panel2':
$('#panel4').css('top', function(index) {
var buffer = $('#'+id).height() + 20 + "px";
return buffer;
});
break;
default: break;
}
});
Теперь в HTML не нужно вносить никаких изменений, хотя вы захотите повторить функцию щелчка, чтобы обработать изменение расположения элементов после щелчка. Я бы упростил жизнь и скрыл все элементы .more, прежде чем развернуть новую коробку, поскольку это означало бы необходимость расчета высот всех вышеперечисленных элементов, но сколько работы вы хотите выполнить, это ваш бизнес.