Jquery animate next div over set width

Question

Я задал аналогичный вопрос, который дал мне этот ответ, однако, пытаясь переместить его на полезную разметку, мне жаль, если вам повезет.

По существу у меня есть строки из 4 divs на 3 divs, когда они нажимаются. Мне нужен следующий div, чтобы развернуть все остальные div в сетке и переключать, когда это необходимо. Я пробовал использовать анимацию и переключение безрезультатно. Один пример с использованием таблиц http://jsfiddle.net/gGc5K/.

Мне нужна следующая разметка для работы таким же образом (с помощью переключателя для закрытия) с использованием метода nexr, если это возможно.

Благодаря

<!--div in the grid--><div class="gridBox" id="one"></div> 
    <div class="pop" id="bigOne">Content here and a toggle link</div><!--This div needs to expand over the full grid--> 

<!--div in the grid--><div class="gridBox" id="two"></div> 
    <div class="pop" id="bigTwo">Content here and a toggle link</div><!--This div needs to expand over the full grid--> 

Answer 1

var top = 0, 
    left = 0; 

$("td").click(function() { 
    var ref = $(this); 
    if ($(this).hasClass('currentAnimated')) { 
     $(this).css({ 
      "z-index": 1 
     }).animate({ 
      top: top, 
      left: left, 
      width: "40px", 
      height: "39px" 
     }, "4s", function() { 
      ref.removeClass('currentAnimated'); 
     }) 
    } else { 
     top = $(this).position().top; 
     left = $(this).position().left; 
     $(this).css({ 
      "z-index": 1 
     }).animate({ 
      top: 0, 
      left: 0, 
      width: "120px", 
      height: "120px" 
     }, "4s", function() { 
      ref.addClass('currentAnimated') 
     }); 
    } 
}); 

DEMO